I want to style the background of an icon. My code gives me an egg-shape but vertical, and I want the egg-shape to be horizontal. Also that the "egg" covers my icon in full. Is that possible?
Updated Fiddle... Fiddle
HTML:
<div class="car">
<div class="pull-left"> <i class="fa fa-calculator"></i></div>
</div>
CSS:
.car .fa-calculator {
color:black;
font-size:200px;
background-color:red;
display:block;
position:relative;
border-radius:80%
}
Use this CSS it will work
.car .pull-left i {
color:black;
font-size:200px;
background-color:red;
display:block;
position:relative;
border-radius:80%;
height:100px;
width:80px;
}
How about this;
.car .fa-calculator {
color:black;
font-size:200px;
background-color:red;
display:block;
border-radius:50%;
padding:.5em;
width:1.6em;
text-align:center;
}
I want the egg-shape to be horizontal. Also that the "egg" covers my icon in full.
For an 'egg' shape the element has to be wider than it is tall (if we are to use border-radius).
So setting uneven padding would seem to be an option.
.car .fa-calculator {
color:black;
font-size:100px;
background-color:#FF0000;
position:relative;
border-radius:50%;
padding: .2em .4em; /* adjust as required */
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet"/>
<div class="car">
<div class="pull-left"> <i class="fa fa-calculator"></i></div>
</div>
Related
I have the following HTML:
<div class="flag_container">
<div class="flag_1">
<img class="flag_img_1" src="../images/gb.png"></img>
<div class="speaker_1">
</div>
</div>
<div class="flag_2">
<img class="flag_img_2" src="../images/at.png"></img>
<div class="speaker_2">
</div>
</div>
<div class="flag_3">
<img class="flag_img_3" src="../images/de.png"></img>
<div class="speaker_3">
</div>
</div>
<div class="flag_4">
<img class="flag_img_4" src="../images/nl.png"></img>
<div class="speaker_4">
</div>
</div>
</div>
and CSS:
.flag_img_1{
width:160px;
height:80px;
cursor:pointer;
}
.flag_img_1:hover+.speaker_1{
display:block;
}
.speaker_1{
width:100px;
height:100px;
background-color:red;
display:none;
position:absolute;
margin-left:170px;
margin-top:-90px;
}
.flag_img_2{
width:160px;
height:80px;
cursor:pointer;
}
.flag_img_2:hover+.speaker_2{
display:block;
}
.speaker_2{
width:100px;
height:100px;
background-color:green;
display:none;
position:absolute;
margin-left:170px;
margin-top:-90px;
}
.flag_img_3{
width:160px;
height:80px;
cursor:pointer;
}
.flag_img_3:hover+.speaker_3{
display:block;
}
.speaker_3{
width:100px;
height:100px;
background-color:blue;
display:none;
position:absolute;
margin-left:170px;
margin-top:-90px;
}
.flag_img_4{
width:160px;
height:80px;
cursor:pointer;
}
.flag_img_4:hover+.speaker_4{
display:block;
}
.speaker_4{
width:100px;
height:100px;
background-color:orange;
display:none;
position:absolute;
margin-left:170px;
margin-top:-90px;
}
.flag_container{
padding:80px 0;
}
.flag_1{
padding-left:406px;
}
.flag_2{
float:left;
padding-left:163px;
padding-top:40px;
}
.flag_3{
float:right;
padding-right:163px;
padding-top:40px;
}
.flag_4{
padding-top:160px;
padding-left:406px;
}
Which creates the following display:
and on hover:
Where the blue square is a placeholder for an image.
This all works fine.
I want to make the display responsive, so when the screen gets smaller, the flags take a central formation like:
My problem is, it will not stay central, but will keep a fixed position in relation to the left. Here is my CSS:
.flag_container{
width:80%;
margin:auto;
}
.flag_1{
width:auto;
padding:0;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
}
.flag_2{
width:auto;
padding:0;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
}
.flag_3{
width:auto;
padding:0;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
}
.flag_4{
width:auto;
padding:0;
margin-bottom:20px;
margin-left:20px;
margin-right:20px;
}
.agendaHeading{
float:left;
font-size:120%;
}
.flag_img_1:hover+.speaker_1{
display:none;
}
.flag_img_2:hover+.speaker_2{
display:none;
}
.flag_img_3:hover+.speaker_3{
display:none;
}
.flag_img_4:hover+.speaker_4{
display:none;
}
I have tried every combination I can think of, and read many posts but it does not work. I suspect it is something to do with the structure of my divs preventing it from working as I want?
An example of CSS where I have managed to centre a div in the way I am trying to here is:
.box1{
width:85%;
margin:auto;
border:1px solid #ffffff;
float:none;
height:50px;
}
But this does not work.
Apologies for the long post/amount of code, but to demonstrate my problem I have to include it all.
I think the problem is that you are using pixels and no % in your paddings.
Did you tried to use % instead of fixed pixels in your padding-left,top and right on you css of .flag_*? I've bee playing a little bit with your code and using % gives you a more efficient way of organize the divs on a resized screen.
I am trying to put a title in a div toolbar next to some pictures. The problem is that my text is not well placed, it should be at least on top of the toolbar but instead it is at bottom and doesn't move.
I would like it to be in the vertical middle at left near the pictures.
Here is a codepen : http://codepen.io/anon/pen/fDojK
And a picture :
Here is the html part of the title bar:
<div id="bar" >
<div id="picturesmenu">
<img src='images/back.jpg' alt='back' />
<img src='images/home.jpg' alt='home' />
<img src='images/reload.jpg' alt='reload' />
</div>
<div id="titlemenu">Main</div>
</div>
<div id="body">
...
And style :
#bar
{
width:100%;
height:50px;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
vertical-align:top;
}
#picturesmenu
{
margin:0;
padding:0;
display:inline;
}
#bar img
{
border:3px solid white;
width:40px;
margin:2px;
}
#titlemenu
{
margin:0;
padding-left:20px;
height:100%;
display:inline;
font-size:20pt;
font-weight:bold;
color:white;
}
#bar span
{
margin-left:20px;
margin-top:200px;
font-size:20pt;
font-weight:bold;
color:white;
}
I tried vertical align and margin but the "Main" text doesn't move...
Thanks in advance before I change anything into tables ;)
[EDIT]
Thank you all for your answers ! I didn't thought about handling the alignment of the content (#titlemenu) instead of the container (#bar), it's not very logical...
You need to work the vertical align for both #picturesmenu and #titlemenu and remove the padding left for that title if you want it to the left. Then work with inline-block elements. Like this:
EDITED WITH CROSS-BROWSER CODE
html, body {
height:100%;
width:auto;
padding:0;
margin:0;
background-color:black;
}
#bar {
width:100%;
height:auto;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
display:block;
}
#picturesmenu {
margin:0;
padding:0;
}
#bar img {
border:3px solid white;
width:40px;
margin:2px;
display:inline-block;
vertical-align:middle;
width:40px;
height:50px;
}
#titlemenu {
margin:0;
padding-left:0px;
display:inline-block;
vertical-align:middle;
font-size:20pt;
font-weight:bold;
color:white;
}
.item {
float:left;
width:120px;
height:120px;
border:2px solid white;
text-align:center;
margin:20px;
padding:20px;
}
.picitem {
height:70%;
margin-bottom:25px;
border:2px solid white;
}
.textitem {
underline:none;
color:black;
font-size:16pt;
color:white;
}
I have forked your CodePen
However, a way better approach would be to give #bar a display:block property and then add inline-block to everything inside, but if you want it to work as in your description, there you go
Add these lines to the #titlemenu in CSS
padding:10px;
display:inline-block;
vertical-align:top;
By vertical-align:top, the block gets aligned to the top of the parentdiv and you set padding to fit the height of the block to the height of the parent div
Demo
As you can see by my code, I am creating several different links in the shape of a circle, these links have an image, however when you hover the image, I want it to change the image to something else.
However when I try to hover it will not work? :S
CSS:
.Row {
width:16%;
height:250px;
text-align:center;
margin-top:25px;
margin-left:130px;
float:left;
display:block;
border:0px solid red;
overflow:hidden;
}
.Google {
width:240px;
height:240px;
text-align:center;
border:5px solid white;
border-radius:300px;
margin:auto;
background-image:url("img/googlet.png");
}
.Google:hover {
background-image:url("img/outlook.png");
}
HTML:
<div class="Row">
<div class="Google"></div>
</div>
You can block a tag with a {display:block;}
than write css for hover like following.
a:hover .Google {background-image:url("img/outlook.png");}
I'm building a test page with a menu bar, but the deviders (basically divs with a width of 1) position themselves differently in Chrome and Mozilla. I'm building it in Chrome, and find it weird that it is doing the positioning thing differently. Does anyone know what might be causing this? My code is as follows:
HTML
<head>
<link rel="stylesheet" type="text/css" href="global.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300' rel='stylesheet' type='text/css'>
</head>
<!-------------------------------------------MENUDEV1------------------------------------------->
<div id="menuContainer">
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuLogo">
<a href="/home.html">
<img id="menuLogo2" src="http://www.placehold.it/126x50/ff0000/000000&text=Logo+gaat+hier">
</a>
</div>
<div id="menuDevide1"></div>
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuPortfolio1">
<a id="menuPortfolio2" class="menuClick" href="portfolio.html">portfolio</a>
</div>
<div id="menuDevide2"></div>
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuServices1">
<a id="menuServices2" class="menuClick" href="services.html">services</a>
</div>
<div id="menuDevide3"></div>
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuProcess1">
<a id="menuProcess2" class="menuClick" href="process.html">our process</a>
</div>
<div id="menuDevide4"></div>
<!-----------------------------------DEVIDER----------------------------------->
<div id="menuContact1">
<a id="menuContact2" class="menuClick" href="contact.html">contact</a>
</div>
<!-----------------------------------DEVIDER----------------------------------->
</div>
<div id="menuBottomline"></div>
<!-----------Everything from MENUDEV1 up to this point should be considered as a whole.----------->
CSS
#menuContainer{
width:650px;
height:50px;
margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
background-color:rgba(100, 100, 100, 0.46);
}
#menuLogo2{
height:50px;
width:126px;
}
/*ALL "menuDevide" IDS ARE TO BE NUDGED TO THE LEFT 2 TO 3 PIXELS AFTER THE MENU ITEMS HAVE BEEN PLACED!*/
#menuDevide1{
width:1px;
height:45px;
background-color:black;
position:relative;
top:-47.5px;
left:131px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
#menuDevide2{
width:1px;
height:45px;
background-color:black;
position:relative;
top:-119.5px;
left:259px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
#menuDevide3{
width:1px;
height:45px;
background-color:black;
position:relative;
top:-191.5px;
left:386px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
#menuDevide4{
width:1px;
height:45px;
background-color:black;
position:relative;
top:-263.5px;
left:515px;
margin-top:auto;
margin-right:0;
margin-bottom:auto;
margin-left:0;
}
#menuBottomline{
width:100%;
height:1px;
background-color:black;
position:absolute;
top:70px;
left:0px
}
.menuClick{
color:#000000;
text-decoration:none;
font-family: "Open Sans", Arial, sans-serif;
font-size:20px;;
}
.menuClick:hover{
color:#999999;
}
#menuPortfolio1{
position:initial;
top:-83px;
left:13px;
width:126;
}
#menuServices1{
position:initial;
top:-83px;
left:131px;
width:126;
}
#menuProcess1{
position:initial;
top:-83px;
left:131px;
width:126;
}
#menuContact1{
position:initial;
top:-83px;
left:131px;
width:126;
}
#menuPortfolio2{
}
#menuServices2{
}
#menuProcess2{
}
#menuContact2{
}
Alternatively, you could check out this JSfiddle
Every browser has its own default settings for font size, margins and/or padding around certain elements, etc. Webdesigners should aim to have their sites display well on all kinds of browsers, but these different default settings can easily lead to problems.
http://meyerweb.com/eric/tools/css/reset/ is a tool to reset all default css properties to zero in each browser. I tried to add it in your JSfiddle and the style was applying in the same way in FF and Chrome. OFC, now you have to rework it until the wanted result.
I am creating my own personal website as a test for what I have learned so far in HTML and JavaScript. I made the toolbar, and it looks nice on my monitor, which has quite a large width. I have the toolbar contents to be in the center. I tried accessing it on a smaller monitor, and the elements in the toolbar overlapped each other because I set the contents based on percentages. I know that measuring with pixels will come up with the same problem. How would I create a website where if the monitor width is larger than x pixels, then it will center the contents of the toolbar, but if the monitor width is smaller than x pixels, it will not center the contents of the toolbar?
As you can see in this jsFiddle, the elements overlap, but if you drag the view pane wider, you can see that it centers.
index.html:
<body>
<div id="header">
<div id="toolbar">
<div id="links">
<ol>
<li id="home">Home</li>
<li id="blog">Blog</li>
<li id="forum">Forums</li>
<li id="chatbox">Chatbox</li>
<li id="code">Code</li>
<li id="calendar">Calendar</li>
</ol>
</div>
<div id="login">
Username: <input type="text" name="firstname"></input>
Password: <input type="text" name="lastname"></input>
<button id="submit" class="button">Submit</button>
</div>
</div>
</div>
CSS:
body{
background-color:#EBF2F0;
margin-top:50px;
}
#links{
padding:0px;
margin:0px;
top:-10px;
position:absolute;
vertical-align: center;
}
a:link{
text-decoration:none;
color:#FFFF00;
}
a:visited{
text-decoration:none;
color:#FFFF00;
}
a:hover{
text-decoration:none;
color:#000BF2;
}
a:active{
text-decoration:none;
color:#FFFF00;
}
li{
display:inline;
padding:0px;
font-family:Courier;
}
ol{
list-style-type: none;
}
#header{
width:100%;
padding:5px 10px;
margin:0px;
height:25px;
top:0px;
left:0px;
position:fixed;
background-color:#000000;
}
#toolbar{
width:70%;
margin-left:15%;
margin-right:15%;
}
#home,#blog,#forum,#chatbox,#code,#calendar{
padding:10px;
color:#000BF2;
}
#home:hover,#blog:hover,#forum:hover,#chatbox:hover,#code:hover,#calendar:hover{
background-color:#2E2E2D;
color:#000BF2;
}
#login{
color:#FFFFFF;
margin-right:30px;
text-align:right;
}
#submit{
margin-top:-7px;
margin-left:10px;
padding:6px;
}
If you need a CSS only solution you could play with min-width:
#toolbar{
width:70%;
margin-left:15%;
margin-right:15%;
min-width:1200px;
}
Fiddle