How to align text next to bullseye - html

I have created a bullseye logo using CSS and want to put a text aligned next to the logo.
#logo{
width:25px;
height:25px;
border-radius:50%;
background-color:red;
background-clip:content-box;
padding:5px;
border:5px solid red;
color:red;
}
<div id="logo" style="float:left;"><b ><span style="margin-left: 20px;p-bottom: -50px;"> text123</span></b></div>


You can use flexbox:
#container {
display: flex;
align-items: center
}
#logo{
width:25px;
height:25px;
border-radius:50%;
background-color:red;
background-clip:content-box;
padding:5px;
border:5px solid red;
color:red;
}
#text {
color: black;
padding-left: 12px
}
<div id="container">
<div id="logo"></div>
<div id="text">text123</div>
</div>

Related

HTML boxes on left and right sides while having box on center

Hi i am having trouble to code html on something like on the picture below. I have tried float left right
but none of these works for the boxes on the left side and right. for the center box i used margin auto left right.
which works fine. Only problem is whenever i try with boxes on left and right side, it results in weird way and I could not figure it out how it should be done. Help appreciated.
here is the code i have tried and as you might already see i am very new to html.
<html>
<head>
<title>page4</title>
<style>
#container
{
width:1200px;
height:700px;
margin-left:auto;
margin-right:auto;
background-color:grey;
}
#image1
{
background-color: red;
height:140px;
width:300px;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image2
{
background-color: orange;
height:140px;
width:300px;
float: left;;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image3
{
background-color: yellow;
height:140px;
width:300px;
float: left;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image4
{
background-color: blue;
height:140px;
width:300px;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image5
{
background-color: green;
height:140px;
width:300px;
float:right;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image6
{
background-color: lightgreen;
height:140px;
width:300px;
float: right;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image7
{
background-color: purple;
height:140px;
width:300px;
float: left;;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#image8
{
background-color: maroon;
height:140px;
width:300px;
float: left;
font-size:40px;
line-height:140px;
text-align:center;
letter-spacing:10px;
}
#footer
{
background-color: lime;
height:140px;
width:1200px;
float:right;
font-size:40px;
line-height:150px;
text-align:center;
letter-spacing:10px;
}
#content
{
background-color: pink;
height:560px;
width:600px;
font-size:40px;
line-height:290px;
text-align:center;
letter-spacing:10px;
float:left;
}
</style>
</head>
<body>
<div id="container">
<div id="image1"> image1 </div>
<div id="image5"> image5 </div>
<div id="content"> Content</div>
<div id="image6"> image6 </div>
<div id="image7"> image7 </div>
<div id="image8"> image8 </div>
<div id="image2"> image2 </div>
<div id="image3"> image3 </div>
<div id="image4"> image4 </div>
<div id="footer"> footer </div>
</div>
</body>
</html>

Use css left 0 and right 0 will move your button or div to left and right and even it will be responsive

how to create tabs with hidden content at the beginning, show up only when you click?

using css+html only create a click to expand tabs??

This example will show you how to go about doing this:
body {
display: block;
}
.span3:focus ~ .alert {
display: none;
}
.span2:focus ~ .alert {
display: block;
}
.table{
width:400px;
height:200px;
margin:50px auto;
}
.alert{
width:100%;
height:40px;
background:#e74c3c;
text-align:center;
line-height:40px;
color:#fff;
border-bottom:1px solid #fff;
display:none;
}
.row{
width:100%;
height:40px;
background:#e74c3c;
text-align:center;
line-height:40px;
color:#fff;
border-bottom:1px solid #fff;
}
.span3, .span2{
padding:5px 7px;
border:2px solid #e74c3c;
color:#e74c3c;
cursor:pointer;
}
<div class="table">
<span class="span3" tabindex="0">Hide Me</span>
<span class="span2" tabindex="0">Show Me</span>
<br><br>
<div class="row">
#1
</div>
<div class="row">
#2
</div>
<div class="alert">
#3
</div>
</div>
Here's a fiddle: http://jsfiddle.net/6W7XD/6618/

Why the `clear:both` can not written into div.box3?

I want margin-top:10px to be displayed on the top of box3.
Here is the proper codes on firefox.
<div class="clear"></div> was written as a single line before div box3,and
write div.clear{clear:both;} as a special part.
div.box{
width:105px;
height:200px;
border:1px solid red;
}
div.box1{
float:left;
width:50px;
height:50px;
border:1px solid red;
}
div.box2{
float:left;
width:50px;
height:50px;
border:1px solid red;
}
div.clear{
clear:both;
}
div.box3{
width:100px;
height:80px;
border:1px solid red;
margin-top:10px;
}
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="clear"></div>
<div class="box3">box3</div>
</div>
</body>
Now i move clear:both; in the div.box3,the whole css code as below.
div.box{
width:105px;
height:200px;
border:1px solid red;
}
div.box1{
float:left;
width:50px;
height:50px;
border:1px solid red;
}
div.box2{
float:left;
width:50px;
height:50px;
border:1px solid red;
}
div.box3{
clear:both;
width:100px;
height:80px;
border:1px solid red;
margin-top:10px;
}
<body>
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="clear"></div>
<div class="box3">box3</div>
</div>
</body>
No 10px at the top of div.box3.
I know right way to solve it ,want to know the principle behind the proper css code.

Margin: auto doesn't work and other questions have not helped fix it

I'm having trouble getting columnContainer to center inside sectionTwo. The code is below. No matter what I do, it seems to be left aligned.
HTML:
<section class="sectionTwo">
<div class="columnContainer">
<div class="columnExplanation">
<img src="Images/imagehere.png" style="width:150px;height:auto;margin-left:30%;margin-bottom:10px;"/>
<p>text here.</p>
</div>
</div>
</section>
CSS:
section.sectionTwo{
padding-bottom:20px;
width:100%;
height:340px;
position:relative;
background-color:#262626;
border-top: 8px solid #3C3C3C;
}
div.columnContainer{
width:100%;
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
Thanks for your help!

If you are trying to center 'ColumnContainer' it already centered it is because you have them both set to 100% width;
change it to this to see it actually working:
section.sectionTwo{
padding-bottom:20px;
width:100%;
height:340px;
position:relative;
background-color:#262626;
border-top: 8px solid #3C3C3C;
}
div.columnContainer{
background-color: red;
width:100%;
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:20px;
text-align: center;
}

I don't think you should use margin-left 30% on your image if you want to center it. Indeed, as an inline element, you can use text-align: center on your parent div to do the trick :
HTML:
<section class="sectionTwo">
<div class="columnContainer">
<div class="columnExplanation">
<img src="Images/imagehere.png" style="width:150px;height:auto;margin-bottom:10px;"/>
<p>text here.</p>
</div>
</div>
</section>
CSS
section.sectionTwo{
padding-bottom:20px;
width:100%;
height:340px;
position:relative;
background-color:#262626;
border-top: 8px solid #3C3C3C;
}
div.columnContainer{
width:100%;
position:relative;
display:block;
margin-top:20px;
text-align: center;
}

this one will help you:
section {position:relative;}
section #your_id {
position:absolute;
top:50%;
margin-top:-100px; */half of your height*/
right:50%;
margin-right:-100px; */half of your width*/
}

How to prevent <hr> from creating a space between two divs?

Okay, so here's the code
.div1 {
background-color:skyblue;
font-family:Verdana;
text-align:right;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
.div2 {
background-color:lightgreen;
font-family:Verdana;
text-align:left;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
<div class="div1">
<h1>Hey</h1>
</div>
<hr>
<div class="div2">
<h1>Hello</h1>
</div>
jsfiddle
As you can see, I tried to put a hr between the two divs. This is good, except for the white space around the black line that I want. I know it's supposed to be like this, but is there a way to get just the black line?

Simple use margin: 0 to hr element:
hr{
margin: 0;
}
.div1 {
background-color:skyblue;
font-family:Verdana;
text-align:right;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
.div2 {
background-color:lightgreen;
font-family:Verdana;
text-align:left;
height:100px;
width:200px;
display:block;
overflow:hidden;
}
hr {
margin: 0;
}
<div class="div1">
<h1>Hey</h1>
</div>
<hr>
<div class="div2">
<h1>Hello</h1>
</div>