I am working on my first website and its very basic code, but
the div "beyza", on the website (on the image) its the text "Site designed by Beyza" in my footer, keeps showing extra space under, how can I resolve the issue? here is how it looks
Many thanks in advance!
footer {
width: 100%;
position: relative;
background-color: rgb(0, 255, 0);
overflow: hidden;
}
.container {
width: %100;
position: relative;
background-color: rgb(0, 255, 0);
}
.instagram {
padding-top: 30px;
display: inline-block;
}
footer small {
display: block;
margin: 20px;
font-size: 21px;
color: #FFF;
text-align: center;
background-color: rgb(0, 255, 0);
}
.sponsor {
float: left;
padding-left: 15px;
margin-bottom: 15px;
display: block;
}
.beyza {
font-size: 14px;
color: #FFF;
float: right;
margin-right: 15px;
}
<footer>
<div class="container">
<div class="instagram">
<a href="https://www.instagram.com/alix.bizet/">
<img src="images/instagram.png" alt="instagram">
</a>
</div>
<small>© 2016 Hair by Hood Project </small>
<div class="sponsor">
<a href="http://designmuseum.org">
<img src="images/DesMus2.png" alt="designmuseum">
</a>
</div>
<div class="beyza">Site designed by Beyza #GRAPHIC DIALOGUE
</div>
</div>
</footer>
Remove margin-bottom from .sponsor class
.sponsor {
float: left;
padding-left: 15px;
->margin-bottom: 15px;
display: block;
}
If you want to keep sponsor higher just add width: 100% to sponsor.
You can also wrap sponsor and beyza in another div element and make it:
display: flex;
flex-direction: row;
justify-content: space-between,
align-items: flex-start;
remove margin-bottom from sponsor
add align-self: flex-end to beyza
You have some issues here:
you missed your closing anchor
<a href="https://graphicdialogue.co">GRAPHIC DIALOGUE</div>
typo
.container{width: %100}
adjustmargin-bottom
.sponsor {
float: left;
padding-left: 15px;
margin-bottom: 15px; //this is the problem-try reduce the size
display: block;
}
Related
I was wondering if there is an alternative method to achieving the results shown in the attached picture. I used absolute positioning to get .resume-icon-container to sit flush with .resume-container.
Every time I tried to add padding or height/width to .resume-icon-container it would undesirably resize .resume-container. I experimented with overflow: auto and the z-index but the only way I could achieve the results I want is with absolute positioning and adding margin-left to position it then padding and font-size to make it flush with .resume-container. I was browsing similar questions as well and someone said to add box-sizing: border-box but I already declared that setting in my CSS reset under the * selector.
I would prefer to stay away from absolute positioning for responsive purposes, so I was wondering if there is another way to achieve what I want.
This is the desired result:
.resume-container {
display: flex;
flex-direction: row;
background: rgba(144, 144, 144, 0.3);
margin-top: 20px;
border-radius: 20px;
padding: 20px;
width: 350px;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-between;
}
.resume-container h1 {
color: #fff;
font-size: 25px;
}
.resume-icon-container {
background: rgba(196, 196, 196, 0.3);
padding: 20px;
position: absolute;
margin-left: 268px;
border-radius: 20px;
font-size: 10px;
}
.resume-icon-container i {
color: #fff;
}
<div class="resume-container">
<h1>Download Resume</h1>
<div class="resume-icon-container">
<i class="fa-solid fa-file fa-3x"></i>
</div>
</div>
Remove the absolute positioning and padding and use margin-left on your h1.
.resume-container {
display: flex;
flex-direction: row;
background: rgba(144, 144, 144, 0.3);
margin-top: 20px;
border-radius: 20px;
width: 350px;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-between;
}
.resume-container h1 {
color: #fff;
font-size: 25px;
margin-left: 1em;
}
.resume-icon-container {
background: rgba(196, 196, 196, 0.3);
padding: 20px;
border-radius: 20px;
}
.resume-icon-container i {
color: #fff;
width: 100%;
}
<script src="https://kit.fontawesome.com/6140596fcb.js" crossorigin="anonymous"></script>
<div class="resume-container">
<h1>Download Resume</h1>
<div class="resume-icon-container">
<i class="fa-solid fa-file fa-3x"></i>
</div>
</div>
The way you are tuning those margins and paddings, you will always be looking at something different depending on the size of the screen. You need to use relative positioning so that the items appear on the screen the same regardless of the number of pixels. It can also get confusing to mix margin with padding. Margin will push the element from its nearest element while padding will push elements inside that element away from the left,top,etc.
I like to start by creating a container for each element so that we can design each new div element like its own page.
Consider the following code:
<div id="View">
<div id="OptionBlock">
<div id="Options1">
<div id="AddDocument" class="options">Add New Document<div id="DocumentIcon"></div></div>
<div id="AddTemplate" class="options">Add New Template<div id="TemplateIcon"></div></div>
</div>
<div id="Options2">
<div id="ChangeSignature" class="options">Change Your Signature<div id="SignatureIcon"></div></div>
<div id="Settings" class="options">Settings and Subscription<div id="SettingsIcon"></div></div>
</div>
</div>
</div>
#View {
width: 100%;
height: 60%;
}
#OptionBlock {
width: 100%;
}
#Options1 {
width: 100%;
float: left;
}
#Options2 {
width: 100%;
float: left;
}
#AddDocument {
float: left;
padding: 5px;
width: 25%;
height: 38%;
margin-left: 24%;
margin-right: 2%;
margin-top: 2%;
text-align: center;
border: 2px solid black;
border-radius: 25px;
background-color: #ffffff;
font-size: x-large;
font-weight: bold;
}
#AddTemplate {
float: left;
padding: 5px;
width: 25%;
height: 38%;
margin-top: 2%;
margin-right: 24%;
text-align: center;
border: 2px solid black;
border-radius: 25px;
background-color: #ffffff;
font-size: x-large;
font-weight: bold;
}
Notice how I treat the outer boxes as large containers, defining all the total width and height we need, then leaving it to the css for particular elements showing content to position themselves within that container on the screen. The width and left and right margins of elements #AddDocument and #AddTemplate add up to 100% width so that the entire box it is placed in is accounted for.
Preview CSS Placements (this renders dead center at the top of the webpage)
It's just a matter of playing with the css.
For this kind of "trial and error" problem you should use CodePen or similar. It'll make your life much easier.
.resume-container {
display: flex;
flex-direction: row;
background: rgba(144, 144, 144, 0.3);
margin-top: 20px;
border-radius: 20px;
/* padding: 20px;*/
width: 350px;
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-between;
}
.resume-container h1 {
color: #fff;
font-size: 25px;
padding: 20px;
margin: 0;
}
.resume-icon-container {
background: rgba(196, 196, 196, 0.3);
padding: 20px;
float: right;
/*margin-left: 268px;*/
border-radius: 20px;
/*font-size: 10px;*/
height: 100%;
}
.resume-icon-container i {
color: #fff;
}
.bi {
font-size: 2rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css" rel="stylesheet" />
<div class="resume-container">
<h1>Download Resume</h1>
<div class="resume-icon-container">
<i class="fa-solid fa-file fa-3x"></i>
<i class="bi bi-file-earmark-text"></i>
</div>
</div>
This is the current result I am getting
And here is the HTML:
<div class="activity_title_hours">
<div class="activity_title">
The Gym
</div>
<div class="activity_hours">
- 5 Hours
</div>
</div>
and this the relevant css:
.activity_title_hours{
display: flex;
}
.activity_title {
float: left;
font-size: 35px;
text-decoration: underline;
height: 100%;
width: 50%
}
.activity_hours {
float: left;
font-size: 20px;
min-height: 100%;
width: 50%;
text-align: left;
}
I am trying to get the text to be as follows
The Gym - 5 Hours
but with "The Gym" underlined
I have tried adding the following to my activity_hours class:
position: absolute;
bottom: 0;
left: 0;
No need for width or float styles, simply use flex properties to the parent to make alignment or positioning
.activity_title_hours{
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.activity_title {
font-size: 35px;
line-height: 40px;
text-decoration: underline;
}
.activity_hours {
font-size: 20px;
line-height: 40px;
}
I think inline-block displays will give you a better result, in this case.
.activity_title_hours {
display: block; /* Or simply remove this style block. */
}
.activity_title,
.activity_hours {
display: inline-block;
}
.activity_title {
font-size: 35px;
text-decoration: underline;
}
.activity_hours {
font-size: 20px;
}
<div class="activity_title_hours">
<div class="activity_title">
The Gym
</div>
<div class="activity_hours">
- 5 Hours
</div>
</div>
If you set the same line-height to both div's then the text will be next to eachother.
by adding the following to the activity hour class you can align the div (in an absolute way) to the bottom left.
I made my answer with the minimal change to your original code. But you probably can get a better solution with a bit of changed html/css.
position: absolute;
bottom: 0px;
left: 0px;
width: 300px;
.activity_title_hours{
display: flex;
position: absolute;
bottom: 0px;
left: 0px;
width: 300px;
}
.activity_title {
float: left;
font-size: 35px;
line-height: 40px;
text-decoration: underline;
height: 100%;
width: 50%
}
.activity_hours {
float: left;
font-size: 20px;
line-height: 40px;
min-height: 100%;
width: 50%;
text-align: left;
}
<div class="activity_title_hours">
<div class="activity_title">
The Gym
</div>
<div class="activity_hours">
- 5 Hours
</div>
</div>
If you just want to have have one part of the sentence underlined you can use a span. This element is set to display:inline by default and won't change the format of a text when used. You can apply your css to this element then, e.g. text-decoration:underline. If the rest of your div is empty, you can just use a padding to get your text at the bottom left.
.activity_title_hours{
font-size: 35px;
background: red;
padding: 50px 50px 10px 10px;
}
.activity_title {
text-decoration: underline;
}
<div class="activity_title_hours">
<span class="activity_title">
The Gym
</span>
- 5 Hours
</div>
Flexbox can do that.
.activity_title_hours {
height: 50vh;
display: flex;
background: lightblue;
align-items: flex-end;
}
.activity_title {
font-size: 35px;
text-decoration: underline;
}
.activity_hours {
font-size: 20px;
line-height: 35px;
text-align: left;
}
<div class="activity_title_hours">
<div class="activity_title">
The Gym
</div>
<div class="activity_hours">
- 5 Hours
</div>
</div>
The most simplest solution I can see is setting up margin-top: auto. You just need to wrap text with an additional
div
JSFiddle Example
https://jsfiddle.net/oq0nk7w2/
CSS
.activity_title_hours{
display: flex;
flex-direction:column;
height: 200px;
background: red;
}
.bottom-container{
margin-top: auto;
}
.activity_title {
font-size: 35px;
text-decoration: underline;
}
.activity_hours {
font-size: 20px;
}
HTML
<div class="activity_title_hours">
<div class="bottom-container">
<span class="activity_title">
The Gym
</span>
<span class="activity_hours">
- 5 Hours
</span>
</div>
</div>
Add **display: flex; align-items: center;** to .activity_hours if you want position in center, or align-items: flex-end; to position at the bottom. Or you can use padding-top in *.activity_hours to position as you want.
I am trying to make a responsive tweet button with the twitter bird floated left, the text next to it and centered.
My code is:
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align: center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
width: 100%;
padding-bottom: 10%;
}
img .tweet {
float: left;
}
/* Tweet This: */
.span-content {
display: block;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
</div>
</div>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
CSS
I've tried pretty much everything under the sun.
I can't seem to get the rectangle to shrink and widen when I resize the page or go into Dev Tools and use the mobile device pane.
I understand CSS less than I do JavaScript at this point. Not sure if I should use flexbox in this instance or how I would do that.
Here is the CodePen
you can use quotes using pseudo element ::before and a::after
Thank you. This works for the most part. However I can't get the
twitter bird to float left and the text to be beside it. Any
suggestions?
I used flexbox the text will be next to the twitter button on desktop view, and below on mobile view.
#import url(https://fonts.googleapis.com/css?family=Open+Sans|Satisfy);
/*Styles for whole page */
img {
max-width: 100%;
border: 7px solid #00a5ef;
}
#page-wrap {
display: flex;
flex-wrap: wrap;
justify-content: center
}
h1 {
font-weight: bold;
text-transform: uppercase;
font-size: 30px;
margin-top: 50px;
width: 300px;
line-height: 1;
font-family: 'Open Sans', sans-serif;
color: #1485C7;
text-align: center;
letter-spacing: 0;
}
/* On: */
h1 .center {
text-transform: capitalize;
font-weight: normal;
font-family: "Satisfy";
vertical-align: text-bottom;
line-height: 10px;
color: #1485C7;
}
h1 .bigger {
font-size: 46px;
color: #1485C7;
display: block
}
/* Rectangle 1: */
.flex-rectangle {
background: #fff none repeat scroll 0 0;
flex: 1 15%;
margin: 0 15%;
max-width: 300px;
padding: 10px;
position: relative;
quotes: "\201C""\201D";
text-align: center;
top: 0;
}
.flex-rectangle::before {
color: #00a5ef;
content: open-quote;
font-family: Georgia;
font-size: 25vw;
left: -15vw;
position: absolute;
top: 50%;
}
.flex-rectangle::after {
color: #00a5ef;
content: close-quote;
font-family: Georgia;
font-size: 25vw;
position: absolute;
right: -15vw;
top: 50%;
}
.text {
align-self: flex-end
}
.span-content {
display: inline-block;
color: #00A5EF;
margin: 0 auto;
padding: 5px;
border: 3px solid #00A5EF;
}
<div id="page-wrap">
<div class="flex-rectangle">
<div class="heading">
<h1>Random Quotes<span class="center">On</span><span class="bigger">Design</span></h1>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet" />
<div id="buttons">
<div class="span-content">
Tweet This
</div>
</div>
</div>
<div class="text">
<h1>Random Quotes</h1>
</div>
</div>
you have to place the bird and the text to one div and code for the image element in order to code for the image part you have to call first the first parent div and other div in one code where the image element is located .flex-rectangle .image-wrapper imgto edit the code for image. and also you have to insert the html code for <span>Tweet This</span> inside the .image-wrapper to make the image go left and your text go center.
CSS CODE :
.flex-rectangle {
float: left;
margin: 0 5px;
max-width: 500px;
text-align:center;
width: 200%;
background: #FFFFFF;
border: 7px solid #00A5EF;
}
/* Styles Twitter Bird png */
.image-wrapper {
padding-top: 10%;
position: relative;
margin: auto;
max-width: 125;
max-height: 50px;
width: 100%;
padding-bottom: 15%;
}
.flex-rectangle .image-wrapper img {
float: left;
max-width: 50px;
max-height: 50px;
width: 100%;
}
/* Tweet This: */
.span-content {
display: block;
text-align: center;
color: #00A5EF;
}
.span {
display: block;
text-align: center;
font-family: OpenSans;
font-size: 36px;
color: #00A5EF;
}
HTML Code:
<div class="flex-rectangle">
<div class="image-wrapper">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/281152/Twitter_bird_logo_2012.svg" class="tweet"/>
<div id="buttons">
<div class="span-content">
<span>Tweet This</span>
</div>
</div>
</div>
</div>
I know there were many similar questions, but I couldn't figure it out.
I have the following div:
#inputHeader {
width: 100%;
background: #30273a;
border-radius: 10px 10px 0px 0px;
}
#inputHeaderTitle {
color: white;
margin-left: 10px;
display: inline-block;
}
#inputHeaderEdit {
color: white;
display: inline-block;
}
<div id="inputHeader">
<p id="inputHeaderTitle">Header</p>
<span id="inputHeaderEdit" class="glyphicon glyphicon-pencil"></span>
</div>
I want the "inputHeaderTitle" on the left side of the div, and the "inputHeaderEdit"-span on the right side. How can I do this?
Edit:
Here is a jsfiddle: https://jsfiddle.net/9nuhay76/1 where I did float:left/right. But if I do so, the outer DIV gets a height of 0px. Why?
#inputHeader {
width: 100%;
background: #30273a;
border-radius: 10px 10px 0px 0px;
display: flex;
align-items: center;
padding: 0 10px;
box-sizing: border-box;
}
#inputHeaderTitle {
color: white;
display: inline-block;
flex: 1;
}
#inputHeaderEdit {
color: white;
display: inline-block;
}
<div id="inputHeader">
<p id="inputHeaderTitle">Header</p>
<span id="inputHeaderEdit" class="glyphicon glyphicon-pencil">Edit</span>
</div>
<div id="inputHeader">
<p id="inputHeaderTitle" style="float:left">Header</p>
<span id="inputHeaderEdit" style="float:right" class="glyphicon glyphicon- pencil"></span>
</div>
Do you mean like this?
You can add float: right
Like this:
jsbin
Firstly you should not use float for positioning. You are in the right place with display inline-block.
try using display table instead though and then text alignment to position them left or right as bellow.
#inputHeader {
width: 100%;
background: #30273a;
border-radius: 10px 10px 0px 0px;
}
#inputHeaderTitle {
color: white;
margin-left: 10px;
display: inline-block;
}
#inputHeaderEdit {
color: white;
display: inline-block;
}
/* NEW */
.align-table {
display: table;
width: 100%;
table-layout: fixed;
}
.t-align {
display: table-cell;
vertical-align: top;
width: 100%;
}
.align-center {
text-align: center;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
<div id="inputHeader" class="align-table">
<div class="t-align">
<p id="inputHeaderTitle">Header</p>
</div>
<div class="t-align align-right">
<span id="inputHeaderEdit" class="glyphicon glyphicon-pencil"></span>
</div>
</div>
I have the following HTML:
<div id="main-menu">
<a id="main-menu-logo" href="index.html">
<span style="color:white;">MY NAME</span>
</a>
<div id="main-menu-items">
......
</div>
</div>
And the following CSS:
#main-menu{
margin-left: 1px;
float: left;
height: 40px;
border: 2px solid black;
background-color: rgba(0, 0, 0, 0.8);
width: 120px;
}
#main-menu-items{
display: none;
}
#main-menu-logo {
line-height: 40px;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
How can I get the main-menu-logo to be centered inside the main-menu?
Thank you
You can centre using display:table and margin.
#main-menu-logo {
line-height: 40px;
display: inline-block;
margin: 0 auto;
display: table;
}
More info here: How to horizontally center a <div> in another <div>?