Ok here is my site http://joshadik307.github.io/. And here is the specific code I need help with
CSS:
.pagemenu {
padding-top: 25px;
padding-right: 2%;
padding-left: 2%;
text-align: center;
}
.bubblewrap {
display: inline-block;
vertical-align: top;
width: 23%;
margin-right: 5%;
margin-left: 5%;
text-align:center;
}
.bubble {
background-color: white;
border-radius: 50%;
border-style: solid;
border-width: 5px;
border-color: black;
width: 250px;
height: 250px;
display: inline-block;
}
HTML for one of the 5 circles (I figured it would save space to just show one, but they all use the same html and are all wrapped in the same pagemenu div)
<div class = "pagemenu">
<div class = "bubblewrap">
<div class="bubble">
<div class="text">
ABOUT
</div>
</div>
</div>
</div>
Ok now here is the problem. If you look at my sight (linked to above) basically I have 5 circle divs set up to align themselves in the shape of a W at the top of the page (under the header.) The problem is the W is not always center aligned on the page, and after looking at the source on chrome, I realized that this is because the "bubbles" are not always horizontally centered within the bubble wrapper. Does anyone know how I can fix it so that the bubble div always aligns itself horizontally within the bubblewrapper div?
Add margin: auto; into your .bubble class
.bubble {
background-color: white;
border-radius: 50%;
border-style: solid;
border-width: 5px;
border-color: black;
width: 250px;
height: 250px;
margin: auto;
}
A margin:0 auto; to your .bubble class will do the fix :)
Related
It creates exactly what I need but I cannot center to whole element on the page. centering will only center the text within the background colored area. What am I doing wrong?
I tried many different code combination but cannot make this work.
GROW YOUR BUSINESS WITH US
<h1 style="display: inline-block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px;">GROW YOUR BUSINESS WITH US</h1>
I would like whole element above to be centered on the page.
You also could just change the display attr to block and add margin:auto to it!
I placed it into a div with 1000px width for you to view, but you just need the h1
<div style="width:1000px;">
<h1 style="display: block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; margin:auto;">GROW YOUR BUSINESS WITH US</h1>
</div>
You can add div around H1 and add width and margin:auto like
<div style="width:650px; margin: auto;"><h1 style="display: inline-block; text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; ">GROW YOUR BUSINESS WITH US</h1><div>
Or like Huangism do
<h1 style="text-align: center; background-color: #273b86; color: #ffffff; padding: 5px; border-radius: 5px; width: 640px; margin: auto;">GROW YOUR BUSINESS WITH US</h1>
here is an example
.container{
width: 100%;
height: 100%;
border: 1px red solid;
display: inline-block;
height: 90vw;
}
.container > div{
width: 150px; /* very impotent */
margin:auto;/* center position */
border:1px #CCC solid;
text-align:center;
}
<div class="container">
<div> center div </div>
</div>
I'm trying to set the left border of siginimage to 40px, but since the height of the signinimage is 25px, the border height is also being set as 25px.
.top-header {
float: left;
border-left: 2px solid #CCCCCC;
height: 30px;
margin-top: 0px;
}
#signinimage {
padding-top: 6px;
padding-left: 10px;
height: 25px;
width: 25px;
}
<img src="images/signinimage.png" class="top-header" id="signinimage">
Two approaches.
Either create a container and put the image inside it
In your question, you said you wanted to extend the border to the left
(but I mean that's just a matter of simple float:, but you can apply
this approach in general
img {
width: 100px;
height: 100px;
float: right;
}
#container {
border: 3px solid black;
width: 150px;
height: 100px;
}
<div id ="container">
<img src=https://i.imgur.com/QIsNrpM.png/>
</div>
The other alternative, if you insist on using only one element instead of two, you can set the image as a background-image of a differently sized div
#imganddiv {
border: 3px solid black;
width: 150px;
height: 100px;
background-image: url('https://i.imgur.com/QIsNrpM.png');
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: right center;
}
<div id="imganddiv"></div>
I personally prefer the first option as it's a bit more intuitive and generally considered a common practice on to how containers (elements inside elements) should be handled.
To get a border taller than the image, you can wrap the image in a container, and apply the border to that container.
.top-header{
float: left;
border-left: 2px solid #CCCCCC;
height: 40px;
margin-top: 0px;
/* Center the image vertically */
display: flex;
align-items: center;
}
#signinimage{
height: 25px;
width: 25px;
padding-left: 10px;
}
<div class="top-header">
<img src="http://placekitten.com/25/25" id="signinimage">
</div>
My second inner div position is weirdly adjusted when my first inner div have a long link text. How to fix it?
My html code:
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
My css code:
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
link to the picture of the div:
https://www.dropbox.com/s/9zs4mgj7izuqsp1/question.png?dl=0
The problem is with your CSS. Particularly the .div-wrapper div
You need to change the display setting from inline-block to inline-table to get it inside the cell. You mentioned that you wanted the box inside the larger box, but you need to clarify how exactly you want the inner boxes to be placed inside the larger box (ex: small gap between the boxes, both perfectly fit inside the large box with equal sizes)
Just changed inline-block to inline-flex for your inner div and looks fine.
.div-wrapper {
border: 1px solid black;
width: 200px;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-flex;
border: 1px solid black;
width: 90px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
<div class='div-wrapper'>
<div class='inner-div1'>
This is a long link
</div>
<div class='inner-div2'>
Link 2
</div>
</div>
Just have to fix this, I don't think any solution here explains why the problem exists. Just to add up, the problem with this is because vertical-align is set to baseline by default.
What you have to do is set the vertical-align to top
Insert it in your CSS:
.div-wrapper div {
vertical-align: top;
}
Link to solution: https://jsfiddle.net/Lnvgkfz3/
Small changes in CSS
.div-wrapper {
border: 1px solid black;
width: auto;
height:70px;
margin: auto;
margin-top: 10px;
padding: 0;
}
.div-wrapper div {
display: inline-block;
border: 1px solid black;
width: 190px;
height: 60px;
text-align: center;
}
.div-wrapper div a {
display: block;
text-decoration: none;
}
Hi I have use CSS to positioning my div box and this is my result:
-------
div i
box1 i
-------
----------
i div i
i box2 i
----------
-------
i div
i box3
-------
I'm sorry that I was unable to upload an image becuz my reputation point is just 2 only, Ok let's continue, the result above I get is breaking each div box into new line but I don't want to be like that, the result I want is align the 3 div boxes into same horizontal line like this:
------ --------- ------
i i i i
i i i i
------ --------- ------
this is my CSS code, can someone correct my mistake?
#divbox1{
display: flex;
height: auto;
width: 40%;
margin-top: 5%;
margin-left: -25%;
position: relative;
border-style: solid;
border-color: #888888;
}
#divbox2{
display: flex;
height: auto;
width: 60%;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
position: relative;
border-style: solid;
border-color: #888888;
}
#divbox3{
display: flex;
height: auto;
width: 40%;
margin-top: 5%;
margin-left: 85%;
position: relative;
border-style: solid;
border-color: #888888;
}
Addition point: I want to show 20% display of the the divbox1 and 3 only that's why im using -% margin
#divbox1{
float:left;
height: 50px;
width: 10%;
position: relative;
border-style: solid;
border-color: #888888;
}
#divbox2{
float:left;
height: 50px;
width: 50%;
position: relative;
border-style: solid;
border-color: #888888;
}
#divbox3{
float:left;
height: 50px;
width: 20%;
position: relative;
border-style: solid;
border-color: #888888;
}
<div id='divbox1'></div>
<div id='divbox2'></div>
<div id='divbox3'></div>
Don't use
display:flex;
Instead just go
float:left;
in each of the boxes. And play around with the widths, you might need to lessen the values a little bit. and get rid of those margins.
You are using display:flex; wrong. It needs to be applied to a parent container to work the way you are expecting it to. You'll need to add an extra div encasing the whole thing like this:
<div id="group">
<div id="divbox1"></div>
<div id="divbox2"></div>
<div id="divbox3"></div>
</div>
After doing that, you will need to remove display:flex; from the inner divs. And add it to the grouping div. The resulting CSS should look something like this:
#group{
display:flex;
width:100%;
}
#divbox1{
flex:4;
margin-top: 5%;
margin-left: -25%;
position: relative;
border-style: solid;
border-color: #888888;
}
#divbox2{
flex:6;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
position: relative;
border-style: solid;
border-color: #888888;
}
#divbox3{
flex:4;
margin-top: 5%;
margin-left: 85%;
position: relative;
border-style: solid;
border-color: #888888;
}
Adding the flex:4; or flex:6; to each inner div is basically telling the flexbox what size you want your divs in relation to each other. Then, by default, flexbox will fit them to the width of the screen unless you have things like min-width on your divs.
Hope I helped. Cheers.
Is this were you looking for..?
.container {
width: 960px; /* define your container width */
}
.box {
width: 30%; /* whatever width */
height: 200px; /* whatever height */
background: #ccc;
margin: 30px 1%;
float: left;
}
<div class="container">
<div class="box box1">
<!-- your content goes here -->
</div>
<div class="box box2">
<!-- your content goes here -->
</div>
<div class="box box3">
<!-- your content goes here -->
</div>
</div>
I'm trying to put a logo and a sidebar next to eachother, but it just won't work. The logo container needs to be centered at the top. And the sidebar needs the be at the top-left Can you help me? I already tried float, no succes. :(
code:
<body>
<center>
<div id="logo1">
<div id="logo2"></div>
</div>
</center>
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1"></div>
</a>
</div>
</body>
CSS:
#test1 {
display: inline-block;
position: absolute;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
display: inline-block;
position: absolute;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/1.png');
height: 45px;
width: 45px;
}
#sidebar1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: -10px;
margin-left: -15px;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
}
#logo1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 10px;
height: 100px;
width: 700px;
}
Ok, This is what you have to do :
You need to remove the display:inline-block from #logo1
And instead of just writing margin-top:10px , you need to use margin:0px auto, or you could write margin:10px auto. By this, it will center your #logo1 div.
But to center a "div" , you need to have another container(div) that wrap within your div. So that it will know, from which side to which side that it will have to be "centered".
For that reason, you will need to create another div or container around your #logo1 div, and lets assume it is called "right" (see the code below).
And for this div/container to be just beside your sidebar, it will need to have a relative position same as your sidebar. Now, you can just float both of your #sidebar1 and also your #logo1 to the left.
Thus, you dont have to use that negative margin for your sidebar anymore (remove that). If you wanted to use the negative margin, you have to use the absolute position in this case. But you will then have to restructure your whole #logo1 div which will create a lot of works.
This is the full code for your reference :
HTML code :
<div id="container">
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1">This is sidebar</div>
</a>
</div>
<div id="right">
<div id="logo1">
<div id="logo2"><This is logo</div>
</div>
</div>
</div>
And use this CSS :
#container{
width:1000px;
height:1080px;
position:absolute;
border:1px solid #000;
}
#test1 {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
display: inline-block;
position: relative;
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/1.png');
height: 45px;
width: 45px;
}
#sidebar1 {
display: inline-block;
position:relative;
float:left;
border: 1px solid;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
border:1px solid red;
}
#right{
position:relative;
float:left;
margin-top:0px;
width:870px;
height:100px;
}
#logo1 {
position:relative;
border: 1px solid;
margin: 0px auto;
height: 100px;
width: 700px;
}
Do you want this ?
#test1 {
border: 1px solid;
margin-top: 15px;
margin-left: 22px;
background-image:url('Afbeeldingen/2.png');
height: 45px;
width: 45px;
}
#test1:hover {
background-image:url('Afbeeldingen/1.png');
}
#sidebar1 {
position:absolute;
border: 1px solid;
background-image:url('Afbeeldingen/lol.png');
height: 1080px;
width: 118px;
}
#logo1 {
border: 1px solid;
margin-top: 10px;
height: 100px;
width: 700px;
}
<div id="sidebar1">
<a href="https://test.com/" target="blank">
<div id="test1"></div>
</a>
</div>
<div id="logo1">
<div id="logo2"></div>
</div>
I assume this is what you want? http://jsfiddle.net/Le6PH/
You should do:
Remove the negative margins (If you don't know what you are doing, don't use negative margins)
Remove the <center> tag (This tag is deprecated since EVER)
Remove the margin of your logo
Add a wrapper div around your whole structure
Add the following CSS to that div
CSS
.wrapper{
position:relative;
width:818px; /* sidebar width + logo width */
}
Change position:relative; to position:absolute for your logo & sidebar divs.
Add top:0; for both divs
Add right:0; for the sidebar div
EDIT:
With a centered logo, like this (http://jsfiddle.net/Le6PH/1/) you'll need to change 2 things:
Add a margin-left:118px; to the logo div
Change the width of the wrapper to width of logo + margin logo + width of sidebar.
Try floating your div, it should look like this..
<div class="row">
<div id="log"></div>
</div>
<div class="row">
<div id="sidebar"></div>
</div>
css
.row{
float: left;
width: 50%;
}