I have the following CSS:
.me-header {
display: inline-block;
position: relative;
top: 50px;
left: 10px;
}
.me-header a {
color: #333;
font: 10px "Lucida Grande", Helvetica, sans-serif;
text-decoration: none
}
.resume-header {
display: inline-block;
position: relative;
top: 50px;
left: 100px;
}
.resume-header a {
color: #333;
font: 10px "Lucida Grande", Helvetica, sans-serif;
text-align: center;
text-decoration: none
}
.center-text {
text-align: center;
}
And the following HTML:
<div class="me-header">
<img src="media/me-icon.png" alt="Picture of Christian Selig"><br> <span class="center-text">Contact Me</span>
</div>
<div class="resume-header">
<img src="media/resume-icon.png" alt="Resume icon" title="Click to download resume (PDF)"><br> <span class="center-text">Resume (PDF)</span>
</div>
But my text still comes out left-aligned. Why?
Both a and span are inline elements - so they are only as wide as their contents. So when you center the text, it is centred within the inline element, but the inline element appears on the left.
If you set text-align: center; on the parent block element it will work.
If you want to center the whole block, use an automatic margin.
You could do
.center-text
{
display: table;
margin: 0 auto;
}
Related
I have a cityHeader(in this pic it is Los Angeles).
Underneath cityHeader there is div called weatherMain which contains three smaller divs(id=temperature,id=weatherDescriptionHeader and id=documentIconImg
#cityHeader {
float: right;
display: block;
margin: 5px;
font-size: 42px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#weatherMain {
display: block;
margin-bottom: 20px;
text-align: right;
}
#weatherMain div {
display: inline-block;
}
#weatherDescriptionHeader {
font-size: 28px;
vertical-align: 50%;
}
#temperature {
font-size: 38px;
vertical-align: 25%;
}
<h1 id="cityHeader"></h1>
<div id="weatherMain">
<div id="temperature"></div>
<div id="weatherDescriptionHeader"></div>
<div><img id="documentIconImg" /></div>
</div>
enter image description heredocumentIconImg).
Three smaller divs should be under cityHeader, positioned next to each other and all aligned to the right.
I tried floating them to the right,adding text-align:right to their parent element(weatherMain), nothing works.
In the pic temperature div is 9 degrees,weatherDescriptionHeader is Clear sky and documentIconImg is icon.
Is this what you're looking for: https://codepen.io/dillonbrannick/pen/XOoNjp
I added in the background colours just so it's easy to identify the elements. Just put your background image into the #weatherMain and remove the other background colours and it should work fine. I added in a margin to #weathermain just to display it within the middle of the page.
Also I added a margin:0 to the h1 tag as h1 automatically adds some css style to it that was interfering.
HTML:
<div id="weatherMain">
<h1 id="cityHeader">Hello World</h1>
<div id="temperature">Howya</div>
<div id="weatherDescriptionHeader">Hola</div>
</div>
CSS:
#weatherMain {
background-color:red;
text-align: right;
margin: 10% 20% 10% 20%
}
#cityHeader {
background-color:yellow;
}
h1{
margin:0;
font-size:45px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }
#temperature {
background-color:green;
font-size: 38px;
}
#weatherDescriptionHeader {
background-color:lightblue;
font-size: 28px;
}
Try this:
#weatherMain {
display: block;
margin-bottom: 20px;
text-align: right;
float: right
}
I need to add centered horizontal line behind the link, so when I change size of the screen this line stays centered behind the link and moves with it. Also I need this line to be on the full width of screen.
On first image is what I have right now:
On the second image is what I need, as yo can see there thin gray line centered behind "V" link:
My html code of this link:
<div class="welcome-content">
<h1 class="welcome-text">Welcome To Kramerica Industries</h1>
<div class="explore-container">
<a class="v-explore-button" href="#about"><i class="fa fa-angle-down fa-lg" aria-hidden="true"></i></a>
<p class="explore-text">Explore</p>
</div>
</div>
My Sass:
.welcome-text {
text-align: center;
font-family: "Droid Sans Bold", "sans-serif";
color: #ffffff;
}
.explore-container {
position: absolute;
top: 147%;
left: 38%;
.v-explore-button {
text-decoration: none;
color: #ffffff;
background-color: #2ecc71;
padding: 15px 20px;
border-radius: 100%;
}
.explore-text {
margin-top: 20px;
color: #ffffff;
}
}
How about to use ::before inline block pseudoelement for button class in pair with transform:translateY(50% of the button width);and 100% width?
body{
background-color: black;
}
.welcome-text {
text-align: center;
font-family: "Droid Sans Bold", "sans-serif";
color: #ffffff;
}
.explore-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.v-explore-button {
display: flex;
align-items: center;
position: relative;
text-decoration: none;
color: #ffffff;
background-color: #2ecc71;
padding: 15px 20px;
border-radius: 100%;
}
.explore-text {
margin-top: 20px;
color: #ffffff;
}
.explore-container:before {
content: "";
position: absolute;
top: 1em;
left: 0;
width: 100%;
height: .15em;
background-color: #00bade;
}
.inner-wrap{
margin-right: 38%;
}
<div class="welcome-content">
<h1 class="welcome-text">Welcome To Kramerica Industries</h1>
<div class="explore-container">
<div class="inner-wrap">
<a class="v-explore-button" href="#about"><i class="fa fa-angle-
down fa-lg" aria-hidden="true"></i></a>
<p class="explore-text">Explore</p>
</div>
</div>
</div>
My recommendation would be to use a pseudo-element such as before:
See example for the solution. Let me know if this helps.
You can use the translate property to align elements inside a
container in the middle as demonstrated below without needing to
calculate the approximate % value to align it.
Instead of giving left:38% to your explore-container, set its width to 100% and align the elements using text-align:center as shown below.
I hope this helps.
.welcome-text {
text-align: center;
font-family: "Droid Sans Bold", "sans-serif";
}
.explore-container {
position: absolute;
top: 147%;
margin:0 auto;
width:100%;
text-align:center;
}
.v-explore{
position:relative;
background:yellow;
}
.v-explore-button {
text-decoration: none;
background-color: #2ecc71;
color:#ffffff;
padding: 15px 20px;
border-radius: 100px;
position:absolute;
top:50%;
transform: translate(-50%, -50%);
}
.explore-text {
margin-top: 20px;
}
<div class="welcome-content">
<h1 class="welcome-text">Welcome To Kramerica Industries</h1>
<div class="explore-container">
<div class="v-explore">
<a class="v-explore-button" href="#about">v</a>
<hr>
</div>
<p class="explore-text">Explore</p>
</div>
</div>
I have a div with a select box and 3 images.
I want to make this:
I have this:
So basically I am having trouble aligning the 3 images at the same height as the select box. I have tried several things and have no clue why it does not work.
Here is my HTML and CSS:
#lang_social {
width: 100%;
height: 60px;
background-color: #3CC;
display: table;
}
#language select {
height: 40px;
width: 200px;
background-color: #3FF;
border-color: #3FF;
display: inline-block;
vertical-align: middle;
color: #FFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 16px;
margin-left: 10%;
margin-top: 10px;
;
}
#twitter_conn img {
float: right;
display: inline-block;
vertical-align: middle;
position: absolute;
float: right;
}
#fb_conn {
float: right;
margin-top: 10px;
margin-right: 20%;
display: inline-block;
vertical-align: middle;
}
#linkedin_conn {
float: right;
margin-top: 10px;
margin-right: 10%;
display: inline-block;
vertical-align: middle;
}
<div id="lang_social">
<div id="language">
<select>
<option value="swe">SWEDISH</option>
<option value="eng">ENGLISH</option>
</select>
</div>
<div id="twitter_conn">
<img src="http://www.placehold.it/32" onmouseover="this.src='http://www.placehold.it/32'" onmouseout="this.src='http://www.placehold.it/32'">
</div>
<div id="fb_conn">
<img src="http://www.placehold.it/32" onmouseover="this.src='http://www.placehold.it/32'" onmouseout="this.src='http://www.placehold.it/32'">
</div>
<div id="linked_conn">
<img src="http://www.placehold.it/32" onmouseover="this.src='http://www.placehold.it/32'" onmouseout="this.src='http://www.placehold.it/32'">
</div>
</div>
The general layout
To simplify things, let's create two separate divs that are each given 50% width on one line.
They can be marked up like this:
<div id="lang_social">
<div id="language"><!-- Select goes here --></div>
<div id="social"><!-- Icons go here --></div>
</div>
and positioned like this, each child div is given 50% width and will line up next to the other:
#lang_social > div {
display: inline-block;
width: 50%;
}
We now have two divs on one line:
Right align the icons
We want the social icons to be aligned from the right, that's easy now:
#social {
text-align: right;
}
Apply the colours and we get the finished result:
If you want, we can end the answer here, have a snippet:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#lang_social {
width: 100%;
background-color: #3CC;
line-height: 60px;
/*This Line height is the same as the height and will vertically center a single line*/
min-width: 340px;
}
#lang_social > div {
display: inline-block;
width: 50%;
padding: 0 10px;
}
img {
vertical-align: middle;/*Important to align in the middle*/
}
#social {
text-align: right;
}
#language select {
height: 40px;
width: 200px;
background-color: #3FF;
border-color: #3FF;
color: #FFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 16px;
}
<div id="lang_social">
<div id="language">
<select>
<option value="swe">SWEDISH</option>
<option value="eng">ENGLISH</option>
</select>
</div><div id="social">
<img src="http://www.placehold.it/32/FF0000" />
<img src="http://www.placehold.it/32/FF9900" />
<img src="http://www.placehold.it/32/FF99CC" />
</div>
</div>
or we can go a little further below.
Note:
Each inline elements closing tag has no whitespace between it and the next inline elements opening tag, this prevents the gaps between inline elements. Example:
<div id="language">
Contents
</div><div id="social">
Contents
</div>
box-sizing: border-box incorporates padding and borders into the width and height.
Hover states for the social icons using CSS Sprites
If you want to, we can create a simple image hover state for each social image without javascript.
Instead of using <img>, we can use <a>, like so:
<div id="social">
<a class="icon facebook"></a>
<a class="icon twitter"></a>
<a class="icon linked"></a>
</div>
This allows us to create the normal and hover state with a CSS sprite. We can apply the background to the icon class:
.icon {
display: inline-block;
vertical-align: middle;
background: url(http://i.stack.imgur.com/1eIYU.png);
height: 32px;
width: 32px;
}
The background image looks like this:
Each coloured section should be changed with the social logo on a transparent background.
the top row of colours is used for the unhovered icon state. The bottom row is used for the hovered state.
Red = Facebook icon
Orange = Twitter icon
Pink = LinkedIn icon
Each icon section is 32px x 32px and each icon is positioned with background-position:
.facebook {
background-position: 0 0; /*x-axis | y-axis*/
}
.twitter {
background-position: -32px 0;
}
.linked {
background-position: -64px 0;
}
On hover, the background-position is changed to show a hover state:
.facebook:hover {
background-position: 0 -32px;
}
.twitter:hover {
background-position: -32px -32px;
}
.linked:hover {
background-position: -64px -32px;
}
Completed example
Note:
Each inline elements closing tag has no whitespace between it and the next inline elements opening tag, this prevents the gaps between inline elements.
box-sizing: border-box incorporates padding and borders into the width and height.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#lang_social {
width: 100%;
background-color: #3CC;
line-height: 60px;
/*This Line height is the same as the height and will vertically center a single line*/
min-width: 340px;
}
#lang_social > div {
display: inline-block;
width: 50%;
padding: 0 10px;
}
#social {
text-align: right;
}
#language select {
height: 40px;
width: 200px;
background-color: #3FF;
border-color: #3FF;
color: #FFF;
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 16px;
}
.icon {
display: inline-block;
vertical-align: middle;
margin: 0 0 0 10px;
background: url(http://i.stack.imgur.com/1eIYU.png);
height: 32px;
width: 32px;
transition: background-position .3s
}
.facebook {
background-position: 0 0;
}
.twitter {
background-position: -32px 0;
}
.linked {
background-position: -64px 0;
}
.facebook:hover {
background-position: 0 -32px;
}
.twitter:hover {
background-position: -32px -32px;
}
.linked:hover {
background-position: -64px -32px;
}
<div id="lang_social">
<div id="language">
<select>
<option value="swe">SWEDISH</option>
<option value="eng">ENGLISH</option>
</select>
</div><div id="social">
<a class="icon facebook"></a><a class="icon twitter"></a><a class="icon linked"></a>
</div>
</div>
I couldn't see your icons so i have used my own. you can substitute. I made your ids into classes and gave the lang_social an overall attr of vertical-align:middle to affect everything. I also floated the language left. Here is a fiddle
#lang_social {
width: 100%;
height: 60px;
background-color: #3CC;
display: table;
vertical-align:middle;
}
.language select {
height: 40px;
width: 200px;
background-color: #3FF;
border-color: #3FF;
display: inline-block;
vertical-align: middle;
color: #FFF;
font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
font-size: 16px;
margin-left: 10%;
margin-top: 10px;
float:left;
}
.twitter_conn {
display:inline-block;
margin-top: 10px;
margin-right: 20px;
width:30px;
float:right;
}
.fb_conn {
margin-top: 10px;
margin-right: 20px;
display:inline-block;
width:30px;
float:right;
}
.linkedin_conn {
width:30px;
float:right;
margin-top: 10px;
margin-right: 20px;
display:inline-block;
}
img {
width:32px;
height:32px;
padding:4px;
}
<div id="lang_social">
<div class="language">
<select>
<option value="swe">SWEDISH</option>
<option value="eng">ENGLISH</option>
</select>
</div>
<div class="linkedin_conn">
<img src="http://www.teratology.org/images/linkedin.png" onmouseover="this.src='http://www.teratology.org/images/linkedin.png'" onmouseout="this.src='http://www.teratology.org/images/linkedin.png">
</div>
<div class="fb_conn">
<img src="http://www.musicmatters.ie/images/fb3.png" onmouseover="this.src='http://www.musicmatters.ie/images/fb3.png'" onmouseout="this.src='http://www.musicmatters.ie/images/fb3.png'">
</div>
<div class="twitter_conn">
<img src="http://www.musicmatters.ie/images/twitter3.png" onmouseover="this.src='http://www.musicmatters.ie/images/twitter3.png" onmouseout="this.src='http://www.musicmatters.ie/images/twitter3.png'">
</div>
</div>
It's taken me a ridiculous amount of work to get this menu bar looking clean, which is a problem in and of itself. However, I think it's finally coming together. The problem I'm having now is three-fold.
Two questions:
When this is viewed full screen, the menu bar looks great, but as you close in the screen the "run" button drops to the bottom. What is causing this?
How come if I keep closing the window, the middle .toggle list is stacking on top of the "CodePlayer" logo? What do I need to do to make it so that when the window shrinks, the divs get to the point where they'd begin to overlap and stop?
Why is there a tiny bit of gap between the border-right and bottom-border in the middle section of my menu? I've tried 0px padding and it isn't working.
http://jsfiddle.net/ow5zq9fL/
/*-----------UNIVERSAL------------*/
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
/*-----------MENU BAR------------*/
#menuBar {
height: 40px;
background-color: gray;
max-width: 100%;
}
/*------LOGO, TOGGLES, BUTTON-----*/
#logo,
#buttonDiv,
#toggles {
vertical-align: middle;
display: inline-block;
width: 33%;
height: 18px;
}
/*-----------LOGO------------*/
#logo {
font-weight: bold;
font-size: 1em;
font-family: helvetica;
vertical-align: middle;
position: relative;
top: 12px;
left: 12px;
/* background-color: blue;
*/
}
/*-----------TOGGLES------------*/
.toggles {
text-align: center;
border: 1px solid black;
height: 20px;
position: relative;
top: -9px;
width: 300px;
left: 20px;
}
.toggles li {
list-style: none;
display: inline-block;
border-right: 1px solid black;
}
/*----------TOGGLES LIST----------*/
#resultList {
border-right: none;
}
/*-------------BUTTON------------*/
#buttonDiv {
text-align: right;
position: relative;
top: 8px;
right: 12px;
vertical-align: middle;
}
/*-----------BUTTON------------*/
#htmlList {
padding-right: 20px;
margin-left: -20px;
}
#cssList {
padding: 0 25px;
}
#jsList {
padding: 0 25px;
}
#resultList {
padding: 0 20px;
}
</style>
<div id="wrapper">
<div id="menuBar">
<div id="logo">CodePlayer</div>
<div id="toggles">
<ul class="toggles">
<li id="htmlList">HTML</li>
<li id="cssList">CSS</li>
<li id="jsList">JS</li>
<li id="resultList">Result</li>
</ul>
</div>
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
</div>
Try this. I added a wrapper and applied everything from #buttonDiv to .wrapper. Then I altered it so that it was centered.
New Code:
.wrapper {
text-align: right;
position: relative;
bottom: 12px;
right: 12px;
vertical-align: middle;
}
and
<div class="wrapper">
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
Add float left
#logo, #buttonDiv, #toggles {
...
float: left;
}
http://jsfiddle.net/ow5zq9fL/4/
I've the following problem:
The a tags automatically align to the bottom of the bigger a tag.
I would like to know why and what i can do against it.
Here is my code:
body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}
#navigation {
background-color: #760209;
width: 100%;
height: 55px;
}
#navigation a {
text-decoration: none;
color: #FFF;
/*line-height: 55px;*/
}
#navigation .logo {
font-size: 28px;
font-weight: bold;
}
<div id="navigation">
<div class="container_12">
<a class="logo" href="#">test1</a>
<a class="btn" href="#">Mein Profil</a>
<a class="btn" href="#">Fragen</a>
</div>
</div>
Do a vertical-align to your <a>
#navigation a {
text-decoration: none;
color: #FFF;
/*line-height: 55px;*/
vertical-align:middle; //This line over here
}
You need the vertical-align css property.
You can either use vertical-align: middle; or vertical-align: top;
body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}
#navigation {
background-color: #760209;
width: 100%;
height: 55px;
}
#navigation a {
text-decoration: none;
color: #FFF;
vertical-align: middle; /* <------- */
}
#navigation .logo {
font-size: 28px;
font-weight: bold;
}
<div id="navigation">
<div class="container_12">
<a class="logo" href="#">test1</a>
<a class="btn" href="#">Mein Profil</a>
<a class="btn" href="#">Fragen</a>
</div>
</div>
You can add:
.btn{
vertical-align:top;
}
if you need to align them to the top.
The default value of vertical align is baseline, which means that the element will be aligned to the baseline of the parent element.
That's why in your case the other 2 links seems aligned to the bottom comparing to the first element, just because of different font-size.