I have 1 div with two separate sections of text. However, one of these sections of text is smaller than the other, leaving it slightly lower than the other section.
I would like it to be centered both vertically and horizontally within the div - inline with the larger text... margin-bottom is not working, however margin-left and margin-right are... how do I do this? Thankyou.
.portfolioHeader {
position: relative;
font-family: coolfont;
top: 20px;
font-size: 55px;
color: black;
margin-left: 70px;
text-align: left;
}
a.miniheader {
text-decoration: none;
margin-left: 20px;
}
span.smallerish {
font-size: 35px;
color: #3F3F3F;
text-decoration: none;
}
<div class="portfolioHeader"><a class="header" href="http://www.coopertimewell.com/portfolio">Portfolio ><a class = "miniheader" href="http://www.coopertimewell.com/portfolio/website-design"><span class = "smallerish">di Matteos</span></a></a>
</div>
This is how I would do it:
Fix invalid html
Put the font sizes on the anchors
Vertical align the anchors
If you want the text horizontally centered, then use text-align center on the div (instead of left with margin)
.portfolioHeader {
position: relative;
font-family: coolfont;
top: 20px;
color: black;
text-align: center;
}
a.header {
font-size: 55px;
vertical-align:middle;
}
a.miniheader {
font-size: 35px;
text-decoration: none;
margin-left: 20px;
vertical-align:middle;
}
span.smallerish {
color: #3F3F3F;
text-decoration: none;
}
<div class="portfolioHeader">
<a class="header" href="http://www.coopertimewell.com/portfolio">Portfolio ></a>
<a class="miniheader" href="http://www.coopertimewell.com/portfolio/website-design"><span class = "smallerish">di Matteos</span></a>
</div>
Set vertical property of anchor tag
.portfolioHeader a
{
vertical-align: middle;
}
You need to vertical-align the 'a' tags.
This css should help.
.portfolioHeader {
color: black;
display: table;
font-family: coolfont;
font-size: 55px;
margin-left: 70px;
position: relative;
text-align: left;
top: 20px;
vertical-align: middle;
}
a {
display: table-cell;
text-align: center;
vertical-align: middle;
}
a.miniheader {
left: 30px;
position: relative;
text-decoration: none;
top: -5px;
}
span.smallerish {
color: #3f3f3f;
font-size: 35px;
text-decoration: none;
}
Related
I've been through some CSS practice lately. Let's say I have the following HTML/CSS code of a calendar web app you can see in my Codepen.
What I need is to have the ".day_body" element and the "+" pseudo element along with its white circle container horizontally aligned. Furthermore, I need that "+" to fit in the centre of the white circle. Unfortunately editing the HTML or using flexbox is not an option for now.
Any ideas on how to accomplish that?
<div class="calendar_plan">
<div class="day_title">Today</div>
<div class="day_body">19 May 2020</div>
<div class="day_add">
<span class="plus_sign"></span>
</div>
<div>
.calendar_plan {
background-color: teal;
color: #fff;
margin-top: 2rem;
margin-bottom: 4rem;
padding: 3rem;
clear: both;
overflow: hidden;
}
.day_title {
font-size: 2.2em;
font-weight: 800;
}
.day_body {
font-size: 2em;
float: left;
}
.day_add {
margin-left: 20px;
float: left;
}
.day_add:after {
display: block;
width: 4rem;
height: 4rem;
content: "\002B";
font-size: 4rem;
color: #999;
background-color: #fff;
border-radius: 50%;
line-height: 4rem;
}
.day_add:hover:after {
cursor: pointer;
}
Like already mentioned in the comment, adding text-align: center; to .day-add helps to align the plus sign.
To horizontally align the the date with the circle, you could increase the line-height of the .day_body to the half of the line-height of the circle (4em): line-height: 2em;. Nevertheless this moves the date a little bit 'down'. Is that fine?
Alternatively you could use absolute positioning of the circle.
.calendar_plan {
background-color: teal;
color: #fff;
margin-top: 2rem;
margin-bottom: 4rem;
padding: 3rem;
clear: both;
overflow: hidden;
}
.day_title {
font-size: 2.2em;
font-weight: 800;
}
.day_body {
font-size: 2em;
float: left;
line-height: 2em;
}
.day_add {
margin-left: 20px;
float: left;
text-align: center;
}
.day_add:after {
display: block;
width: 4rem;
height: 4rem;
content: "\002B";
font-size: 4rem;
color: #999;
background-color: #fff;
border-radius: 50%;
line-height: 4rem;
}
.day_add:hover:after {
cursor: pointer;
}
<div class="calendar_plan">
<div class="day_title">Today</div>
<div class="day_body">19 May 2020</div>
<div class="day_add">
<span class="plus_sign"></span>
</div>
<div>
I have been trying to solve this problem where I want the text "Sample" and then I want texts "bla1" and "bla2" to the right of text "Sample". I also want them to stay together when someone scales up and down their browser. So 100% and 200% zoom on any browser should not change the relative positioning of the texts. Any help is much appreciated! If javascript can solve the problem, I'll use javascript.
This photo explains what I want
See the code here: https://codepen.io/anon/pen/KZBzmY#anon-login
HTML:
<div id="tophead">
<a href="index.html">
<h1 class="webHeader">Sample</h1>
<h1 class="webHeader2">bla1</h1>
<h1 class="webHeader3">bla2</h1>
</a>
</div>
CSS:
#tophead {
margin: 0px;
padding: 0px;
border: 2px solid black;
position: absolute;
left: 40%;
font-family: Arial;
color: #00284d;
}
#tophead h1 {
margin: -2px;
}
#tophead a:link {
text-decoration: none;
color: #00284d;
}
.webHeader {
top: -50%;
left: -20%;
font-size: 180%;
position: relative;
}
.webHeader2 {
text-align: right;
font-size: 100%;
position: relative;
}
.webHeader3 {
text-align: right;
font-size: 90%;
position: relative;
}
I will suggest you to wrap the bla1 and bla2 text in <h2> and then use display: inline-block. No need to use position: absolute
Updated Codepen
#tophead {
margin: 0px;
padding: 0px;
font-family: Arial;
color: #00284d;
text-align: center;
}
#tophead h1 {
margin: 0;
display: inline-block;
vertical-align: middle;
}
#tophead a:link {
text-decoration: none;
color: #00284d;
display: inline-block;
border: 2px solid #000;
}
.webHeader2 {
display: inline-block;
margin: 0;
vertical-align: middle;
margin-left: 20px;
}
.webHeader2 span {
display: block;
}
.small {
font-size: 90%;
}
<div id="tophead">
<a href="index.html">
<h1 class="webHeader">Sample</h1>
<h2 class="webHeader2">
<span>bla1</span>
<span class="small">bla2</span>
</h2>
</a>
</div>
I would like to push the text down to be centered in the green part, but I cannot seem to figure it out. I've been messing around with it for some time, but I'm still a novice. Any help would be appreciated. I've added the HTML and CSS below.
.beerimgcontainer {
width: 300px;
height: 400px;
margin-bottom: 20px;
margin-right: 20px;
display: inline-block;
position: relative;
text-align: center;
margin-right: 10px;
overflow: hidden;
max-height: 400px;
}
.beerimgcontainer a {
text-decoration: none;
}
.beerimgcontainer span {
text-decoration: none;
font-size: 23px;
font-family: champagne;
color: black;
}
.beerimgcontainer:hover {
background: #165a11;
color: white;
box-shadow: 0px 0px 0px 2px #3c8837;
box-sizing: border-box;
}
.beerimgcontainer:hover span {
color: white;
}
<div class="beerimgcontainer">
<a href="mug.html">
<img src="images/text2.png" class="positionimg" alt="Mug">
<span>Mug</span>
</a>
</div>
img and span are inline elements. They are initially next to each other. Since your image covers the whole width (that's available; 300px on parent div), it pushes the span down. Margin on the span wouldn't work.
What you should do is to set display: block on the span and then set a margin:
.beerimgcontainer span {
display: block;
margin-top: 15px;
}
JSFiddle
Hey I want to make a website with a frontpage just like this one: http://foreword.io/ .
I need help with the horizontal list to get it just like the one on foreword.io.
I want the yellow area to be stretched all the way to the sides. When I hover over a link it only marks the upper part of the square, so I want it to mark the whole square for each link.
Please help and thanks in advance.
Here is my code:
body {
font-family: Times New Roman;
}
.h1 {
position: absolute;
height: 200px;
top: 90px;
width: 1585px;
text-align: center;
font-size: 350%;
font-family: Times New Roman, Georgia;
}
u {
text-decoration: none;
border-bottom: 5px solid black;
}
.fakta {
position: absolute;
height: 190px;
top: 340px;
width: 700px;
left: 500px;
font-size: 50px;
}
ul {
position: absolute;
height: 100px;
top: 600px;
left: 100px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: white;
}
<div class="h1">
<h1>
<u>DatabaseNavn</u>
</h1>
</div>
<div class="fakta">
<p>Database med ansatte <br> og avdelinger</p>
</div>
<ul>
<li>Side1</li>
<li>Side2</li>
<li>Side3</li>
<li>Side4</li>
<li>Side5</li>
</ul>
You can do this just adding the Height option to "li a" section in the css as below:
li a {
display: block;
color: black;
height: 100px;
text-align: center;
padding: 20px;
text-decoration: none;
font-size:20px;
}
it will set the height of the square so the whole yellow part will change to white.
in the case of the yellow bar size and item positions:
set the width of the ul to 100% so it will use the whole available space on the browser also remove the "left" and finally add 'position:relative', 'left:20%' and 'width:10%; to the li section.
li {
position: relative;
left: 20%;
width: 10%;
float: left;
}
SOURCE: My head :-P
Use display: inline-block; instead of display: block; and you will get an horizontal list.
Weave: http://kodeweave.sourceforge.net/editor/#2b1da7103aeec07f8b53045481c63c77
For something so simple you're using position absolute in places where it's not needed which could be replaced with margin. Thus your code is fairly WET (especially with me being on a tablet right now) So I made a simple mockup that's DRY and can work for RWD as well if you utilize media-queries.
I removed a lot of the unnecessary positioning. By setting the ul tag to text-align center I was able to center the anchors by telling the li tag to be displayed as an inline-block. Then I filled the width using width: 100%; margin: 0; padding: 0;
How this snippet helps.
body {
font-family: Times New Roman;
}
.h1 {
width: 100%;
text-align: center;
font-size: 350%;
font-family: Times New Roman, Georgia;
}
u {
text-decoration: none;
border-bottom: 5px solid black;
}
.fakta {
width: 100%;
font-size: 50px;
text-align: center;
}
ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: white;
}
<div class="h1">
<h1>
<u>DatabaseNavn</u>
</h1>
</div>
<div class="fakta">
<p>Database med ansatte og avdelinger</p>
</div>
<ul>
<li>Side1</li>
<li>Side2</li>
<li>Side3</li>
<li>Side4</li>
<li>Side5</li>
</ul>
as you can see on this JSFiddle and on picture below, I'm struggling to get the signature placed as I want in my banner (I want it at the bottom right of the blue banner without interfering with the quote text alignment). The issue that I have is that with my current code the second line of the text is not perfectly aligned horizontally to the middle of the block (there's more space to the right than to the left).
How could I fix this and have full control on the signature position?
Many thanks,
HTML:
<div class="block blueback center">
<h2 class="white">dfjdsjdklj dsjfdslfjldsjf ldsjfdlsjflkdsfjdlskjf dljfdslfjkldsj dljfsdljfdklsj lkdjflkdsjdlks dsfjsdlkfjkls dsjflkdsfjdkl</h2><p class="signature">John Dupont</p>
</div>
CSS:
.block {
display: block;
margin-right: auto;
margin-left: auto;
clear: both;
box-sizing: border-box;
padding-left: 20px;
padding-right: 20px;
width: 100%;
overflow: hidden;
}
h2 {
color: #2165CB;
font-weight: 600;
font-size: 18px;
}
.white { color: #fff;
letter-spacing: 1px;
font-style: italic;
font-weight: 300;
display: inline;
}
.center {
vertical-align: middle;
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
}
.signature {
display: inline;
margin-top: 20px;
margin-bottom: 0px;
padding-top: 0px;
font-size: 12px;
color: #fff;
float: right;
font-weight: 700;
}
.blueback {
background: #0064C4;
}
They're interfering with each other because they're both set to be inline display. Floating the signature to the right starts on the same line as the quote. Thus the float ends up reducing the amount of width the quote perceives that it has, and a visually off-center center is the result.
I am not sure why inline is necessary. You could leave them both as block display and then align the quote's text to the right.
CSS:
.white {
color: #fff;
letter-spacing: 1px;
font-style: italic;
font-weight: 300;
padding: 0;
margin: 0;
}
.signature {
font-size: 12px;
color: #fff;
text-align: right;
font-weight: 700;
padding: 0;
margin: 0;
}
JSFiddle adjustment
If you compare it with yours, it looks visually the same (except the quote text is now centered).
You can use negative margins:
.signature{
margin-right: -20px;
}
But I would move the padding from the outer div to be margins of inner h2 and used margin-left on class signature:
.block {
display: block;
margin-right: auto;
margin-left: auto;
clear: both;
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
h2 {
color: #2165CB;
font-weight: 600;
font-size: 18px;
margin-left: 20px;
margin-right: 20px;
}
.signature{
margin-left: <put here>
}
You also need to define float: left; for your white class as you have defined float: right; for your .signature and other things you can manage such as margins and paddings.
demo