Is possible to create a big circle around a hyperlink using CSS?
I'm trying to achieve it but my circle is very small. I would like that circle size were similar to hyperlink size. If i put the hyperlink inside a div, it's not being centralized inside the circle.
Here is what i'm doing:
<html>
<head>
<style>
.circle {
border-radius: 1000%;
width: 40px;
height: 40px;
background: green;
}
</style>
</head>
<body>
Test test test test
</body>
</html>
The problem with your code is that the a element is an inline element and thus accepts no height. Change it to a block level element to give it a specified height:
.circle {
border-radius: 100%;
background: green;
display:inline-block;
line-height:100px;
}
To have the text appear in the middle, use line-height instead of height.
Working sample:
http://jsfiddle.net/7qfbopqj/
by using padding you can make the circle just bigger than the link
#circle {
border-radius: 1000%;
padding:50px;/* this instead of a set width and height just change this to change how much bigger the circle is than the link*/
background:black;
text-align:center;
vertical-align:center;
}
This is possible but you have to set the box size to match you text length, try this:
.circle {
border-radius: 1000%;
width: 40px;
height: 40px;
background: green;
display:inline-block;
line-height:40px;
vertical-align:center;
text-align:center;
color:#ffffff;
}
<body>
Test
</body>
try on jsfiddle: http://jsfiddle.net/prt4y7b2/
You could put a div around the link and center the link within.
<div class="circle">
<center>[link name]</center>
</div>
.circle {
border: 2px solid red;
border-radius: 25px;
width: 10%;
height: auto;
margin-left: auto;
margin-right: auto;
}
http://jsfiddle.net/yg25us3k/
Related
How do I not only keep this text centered but have the parallelogram border wrap around h1? I'm still very new to web design....I started with adding the shape I needed, making the color the same as the background, and simply adding the border. But applying it to h1 screws up the entire layout! (not centered) Also I haven't tinkered with it's sizing because it doesn't sit on the page correctly.
:root {
background: #dcd0ff;
}
h1 {
font-family: 'Sacramento';font-size: 45px;text-align: center;
}
#shape1{
width: 150px;
height: 100px;
transform: skew(20deg);
background: #dcd0ff;
border: 1px black solid;
}
<h1 id="shape1">
Sarra's Homemade Kombucha!
</h1>
<style>
:root {
background: #dcd0ff;
}
#shape1 {
width: 150px;
height: 100px;
transform: skew(20deg);
background: #dcd0ff;
border: 1px black solid;
text-align: center;
}
h1 {
font-size: 1em;
}
</style>
<div id="shape1">
<h1>Sarra's Homemade Kombucha!</h1>
</div>
Here's how I would do it. I find it easier to use <div>'s when dealing with shapes like this. They're meant to be containers for other elements, which is exactly what you're trying to do here.
You had some css syntax errors. And it's best practice to wrap text with a tag (I used <span>) in the below example.
EDIT: set margin-right/left to auto to center the h1. More info on margin alignment here ------> CSS Margin.
And #dvfleet413 is right as well. You should really use a div for something like this (containers and such) and then put your h1 inside that div.
The JavaScript is not needed. This is just a test template I always use. Will remove
Comments added.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
root {
background: #dcd0ff;
}
/* you were missing a closing bracket here*/
div {
font-family: 'Sacramento';font-size: 45px;text-align: center;
}
#shape1 {
/*only set width on container*/
width: 40%;
padding: 30px;
transform: skew(20deg);
background: #dcd0ff;
border: 1px black solid;
/*set margin-left/right to auto to center*/
margin-right: auto;
margin-left: auto;
}
#shape1 span {
/*set height/width of span*/
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="shape1">
<span>Sarra's Homemade Kombucha!</span>
</div>
</body>
</html>
I did a quick search on stackoverflow and found some ways to solve it but none works.
I have my HTML code like below:
<div id="product_box">
<div id="pro_img"><img src="images.jpg'" width="140px"/></div>
<div id="pro_text">
</div>
</div>
and my CSS:
<style>
#product_box {
border: 1px solid;
border-color: #8dd5f6;
margin-top: 8px;
margin-left: 4px;
margin-right: 4px;
width: 330px;
height: 196px;
float:left;
}
#pro_text{
float:left;
width:189px;
height: 196px;
background-color: #CCC;
}
#pro_img {
float:left;
border-right:1px solid #8dd5f6;
width:140px;
height: 196px;
}
</style>
The #pro_img is to the left and #pro_text is to the right, it works fine at default zoom and large zoom in but the problem is that when I zoom out the pro_text (right div) falls off the container box.
I found someone says that I need box-sizing: border-box; inside of my CSS. I tried it and put it like this:
<style>
#pro_img {
float:left;
border-right:1px solid #8dd5f6;
box-sizing: border-box;
width:140px;
height: 196px;
}
</style>
It won't fall off anymore but the border is invisible as it border the image from inside.
I disable the border-right from #pro_img, the problem's gone but I want a border-right that would separate the image and the text.
Total width needed: 140(img)+1(border)+189(text) = 330px just fit the container box. I tried increase box width to 332px but it won't help.
Thank you.
That is because you are using float:left I cleared that used margin instead see this http://jsfiddle.net/3pmmjLx8/
UPDATED CSS CODE
#pro_text{
margin-left:141px;
width:189px;
height: 196px;
background-color: #CCC;
}
I'm trying to create a single sentence in some kind of a field I created, and every time I just make the font bigger it pops out of the field, and I gotta lower the font-size to put it inside again.
Can I make the font size bigger and keep it in the field at the same time?
My code:
HTML:
<div id="wrapper">
<h1 style=""> Nothing Created Yet </h1>
</div>
CSS:
#wrapper {
width: 1000px;
height: 120px;
margin-top: 100px;
border: 5px solid gray;
border-radius:500px;
margin-left: auto;
margin-right: auto;
font-family: Arial;
font-size:40px;
background-color: #F0EEF3;
border-color:red;
}
What I get:
You firstly need to remove the browser-default margin styling on your h1 element:
#wrapper h1 {
margin: 0;
}
Then you should ideally give your #wrapper element a line-height equal to its height:
#wrapper {
...
height: 120px;
line-height: 120px;
}
JSFiddle demo.
try this DEMO
#wrapper {
width: 1000px;
height: 120px;
margin-top: 100px;
border: 5px solid gray;
border-radius:500px;
margin-left: auto;
margin-right: auto;
font-family: Arial;
font-size:40px;
line-height:10px;
background-color: #F0EEF3;
border-color:red;
text-align:center;
}
The reason why this happens is you set fixed width and height for the DIV and when you increase the font size, it could no longer fit inside the DIV. So, the answer is it is impossible in fixed size DIV like this.
or do
-added class to the header and put the margin to 0 and center the text
(jsfiddle.net/6GRGH/)
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
I put down an example below that I have trouble with:
<div class="text1">Text 1</div>
<div class="text2">Text 2</div>
Link: http://jsfiddle.net/qhoc/SQpdu/5/
Text 1 has pseudo-element but the height being adjusted with the pseudo-element height.
Requirements:
a. Text 1 height same as Text 2 height
b. The red rectangle in the middle of the button.
c. The text must have space around them
d. Everything has to be position:relative, at least not absolute or fixed because this is just a button that could be placed anywhere.
I could just (a) remove padding: 6px 12px; and add height: 30px; but then my text won't be in the middle with space around it OR (b) add another inner div within Text 1 and make that the red rectangle but I rather not add div.
Is there a way to work around this?
UPDATE: I changed the correct link and clarify the requirements.
I don't know what exactly you want but try this maybe helpful
.text1, .text2 {
width: 200px;
padding: 8px 12px;
display:block;
background-color: gray;
margin: 5px;
height:20px;
}
.text1{
height:28px;
padding:0px 12px 8px 12px;
}
.text1:before {
content:"";
background: red;
display: block;
position: relative;
width: 20px;
height: 10px;
left: 110px;
top: 15px;
}
DEMO
You use this style code
.text1, .text2{
width:120px;
margin:0 auto;
height:30px;
}