I am trying to make some sort of a "2 option choice game" by using two circles as buttons. Within the circle there should be a text, which is centered and does not stick out from the circle. But, when the text is too large, it sticks out underneath the circle.
HTML:
<body>
<header>
<h1>Choose</h1>
</header>
<ul>
<li>Read a book and lay on bed the whole day</li>
<li>Go outside and ride a bycicle with friends</li>
</ul>
</body>
CSS:
h1 {
text-align: center;
font-family: 'oswalditalic';
font-size: 48px;
margin: 0;
}
ul{
text-align: center;
padding: 0;
}
ul li{
font-family: 'oswalditalic';
display: inline-block;
list-style-type: none;
margin:15px 20px;
color: black;
font-size: 26px;
text-align: center;
height: 300px;
width: 300px;
line-height: 300px;
-moz-border-radius: 50%;
border-radius:50%;
background-color: blue;
}
https://jsfiddle.net/sf3dquLs/
It's because of the value of the line-height to vertically center content. It works when there's one line but with two or more lines, it apply the 300px line-height and it is too much.
You can use display:table-cell combined with vertical-align: middle to make it works instead.
h1 {
text-align: center;
font-family: 'oswalditalic';
font-size: 48px;
margin: 0;
}
ul{
text-align: center;
padding: 0;
display: table;
margin: auto;
border-spacing: 30px;
}
ul li{
font-family: 'oswalditalic';
display: inline-block;
list-style-type: none;
margin:15px 20px;
color: black;
font-size: 26px;
text-align: center;
display: table-cell;
height: 300px;
width: 300px;
-moz-border-radius: 50%;
border-radius:50%;
vertical-align: middle;
background-color: blue;
}
<body>
<header>
<h1>Choose</h1>
</header>
<ul>
<li>Read a book and lay on bed the whole day</li>
<li>Go outside and ride a bycicle with friends</li>
</ul>
</body>
The problem you are facing is due to the line-height:300px. The effect of this is that every line (also after word-wrapping) will occupy 300px. I see that you added this property to center your text. So if we remove the line we must find another way to accomplish the centering. Another possible way is to use a :before element and giving it a certain height.
h1 {
text-align: center;
font-family: 'oswalditalic';
font-size: 48px;
margin: 0;
}
ul {
text-align: center;
padding: 0;
}
ul li {
font-family: 'oswalditalic';
display: inline-block;
list-style-type: none;
margin: 15px 20px;
color: black;
font-size: 26px;
text-align: center;
height: 300px;
width: 300px;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: blue;
word-wrap: break-word;
}
ul li:before {
display: block;
height: 120px;
content: "";
}
<body>
<header>
<h1>Choose</h1>
</header>
<ul>
<li>Read a book and lay on bed the whole day</li>
<li>Go outside and ride a bicycle with friends</li>
</ul>
</body>
Related
basically i think its an easy task but i cannot get it right
I have a navigation bar with 5 elements. The third one, which is an round image should be in the center of the webbpage. but because the 4th list element is slightly longer (the word means opening hrs) it does shift to the right a bit. So altough my list (navigation bar) is in the middle of the webpage, the logo itself isnt. I tried a lot but couldnt figure it out.
heres the fiddle:
<header>
<nav>
<ul class="navi">
<li>Home</li>
<li>Gallerie</li>
<li><img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/7/72/Turkey_emblem_round.png" href="#" alt="LS-Lounge"></li>
<li>Öffnungszeiten</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
css here:
nav {
width: 100%;
padding-top: 10px;
padding-bottom: 5px;
font-family: 'Lobster', sans-serif;
letter-spacing: 2px;
text-decoration: none;
background-color: #171717;
text-align: center;
}
ul .navi {
margin: 0 auto;
text-align: center;
}
.logo {
display: block;
height: 10vh;
width: auto;
margin: 0 auto;
padding: 0 5px;
}
.navi {
}
.navi li {
display: inline-block;
vertical-align: middle;
text-align: center;
padding: 0 20;
}
.navi li a{
color: white;
text-decoration: none;
font-size: 4vh;
position: relative;
}
https://jsfiddle.net/emw3b854/
Flexbox would work (You may need to remove the space in you css "ul .navi" should be "ul.navi"
ul.navi {
margin: 0 auto;
text-align: center;
display: flex;
}
.navi li {
display: inline-block;
vertical-align: middle;
text-align: center;
padding: 0 20;
flex-grow: 1;
}
Added demo:
https://jsfiddle.net/u0v6x5e3/
I have 3 main sections to the site I'm practising on: Nav, Header and Section.
My header bar contains an image with some text in the middle, I spent a long time trying to find how to allow the image to accept the text on top of it and then have it go straight in to the centre(both vertically and horizontally) of the img.
I found something that worked, but after finding that solution, my Section decided to also go on top of the image, which I'm certain it is because of the position: absolute; on the image.
The help I need; how do I get the section to go under the header, with keeping the piece of text on top of the image and in the centre of it?
* {
box-sizing: border-box
}
body {
margin: 0px;
padding: 0px;
background-color: #f2f2f2;
}
html {
margin: 0px;
padding: 0px;
}
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: "Open Sans", arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
nav {
margin-bottom: 0;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
height: auto;
text-align: center;
display: table;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
margin: 0;
padding: 0;
vertical-align: middle;
display: table-cell;
}
#bannerImage {
height: 500px;
width: 100%;
position: absolute;
z-index: -1;
}
section {
background-color: white;
font-family: arial;
width: 100%;
border: 1px solid #e7e7e7;
text-align: center;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif" />
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png" />
<h1>Codewarts</h1>
</header>
<section>
<h2>Welcome!</h2>
<div id="content">
<p>Do you have a name?.....Great!</p>
<p>Insert it in the box below!</p>
</div>
</section>
Do You want somenthing like this?
header {
position: relative;
}
header h1 {
top: 50%;
left: 50%;
transform: translate(-50%,-50% )}
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>
I have a project where I need to align certain elements just so. For whatever reason, it's not working. My HTML:
<div class="heading">
<h1>Exotic <strong>Travel</strong></h1>
<div class="left">
<ul>
<li>homepage</li>
<br>
<li>about us</li>
<br>
<li>destinations</li>
<br>
<li>book a ticket</li>
<br>
<li>contact us</li>
</ul>
</div>
<div class="rightimg">
<img src="banner.jpg" alt="Beachside Hotel" />
</div>
<div class="righttext">
<h2>The Perfect Destination</h2>
</div>
</div>
and the CSS:
body {
background-image: url(sky.jpg);
font-family: "Verdana", sans serif;
}
h1 {
font-family: "Calibri Light", sans serif;
color: gray;
}
h2 {
background-color: green;
display: inline-block;
border: 0;
margin: 0;
text-align: center;
width: 750px;
}
a {
color: white;
margin: 4px;
padding: 5px 0 5px 0;
text-decoration: none;
}
.left{
background-color: red;
display: inline-block;
float: left;
height: 200px;
width: 350px;
}
.heading {
background-color: white;
margin: 0 auto;
overflow: auto;
width: 1000px;
}
.righttext {
display: inline-block;
float: right;
height: 60px;
width: 750px;
}
.rightimg {
display: inline-block;
float: right;
margin: 0;
padding: 0;
width: 750px;
}
This SHOULD be working, based on other similar examples I've seen on the site, but it's not taking. Any help here would be appreciated.
I think you are breaking it with your fixed widths, I used 40% width on the left and righttext and that seemed to get everything inline:
.left{
background-color: red;
display: inline-block;
float: left;
height: 200px;
width: 40%;
}
.righttext {
display: inline-block;
float: right;
height: 60px;
width: 40%;
}
https://jsfiddle.net/bkyLojx4/
Also as an fyi br tags are not valid in a ul. Rather use css to handle the styling of the list.
It is because you have the elements at a fixed width which means the combined width of all 3 elements is more than the space available. Try using a percentile widths for adaptive design or adjusting it to the resolution you want to support.
Heres my html for my tabbed navigation bar. Im having trouble centering the text within the li tags and putting padding on the top is not somthing I want to do because I want to put padding around all the text to make the whole tab clickable. If theres any advice for that as well please feel free to give me advice. So how can I make my link text centered and if possible how can I make the whole tab clickable?
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>
This is my CSS. Please tell where I went wrong?!
#tab_container
{
background-color: #222;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: relative;
max-width: 970px;
width: 100%;
text-align: center;
}
#tabs
{
float: left;
margin-top: 0px;
width: 100%;
max-width: 970px;
background-color: #222;
padding-top: 20px;
text-align: center;
}
#nav
{
width: 100%;
max-width: 970px;
text-align: center;
}
ul
{
float: left;
max-width: 970px;
display: -webkit-box;
-webkit-box-flex: 1;
width: 100%;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
text-align: center;
}
ul li
{
display: inline-block;
text-align: center;
width: 158px;
height: 70px;
background-color: black;
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin:0 auto;
padding: 0;
}
ul li a
{
color: #54544b;
text-decoration: none;
text-align: center;
margin: 0px auto;
}
a:hover
{
color: #CF7BA1;
}
.active a
{
text-decoration: underline;
color: #CF7BA1;
}
Option 1:
Really simple. Just add line-height: 70px; to your a tag.
So the css would be:
ul li a
{
color: #54544b;
text-decoration: none;
text-align: center;
margin: 0px auto;
line-height: 70px;
}
Where the 70px is the height of the list element.
Option 2:
Alternatively, you could set your A to display: block; and add padding to that. This would make it clickable, but personally, I prefer to use line height.
ul li a
{
display: block;
padding-top: 15px;
padding-bottom: 15px;
}