I am trying to move an image. I Want it to be alligned with the title "Experience". Here is my code
html code
<header>
<h1>Experience</h1>
<div class="logo">
<img src="./img/exp.png">
</div>
</header>
and the css code
.logo{
width: 100px;
}
.logo img{
float: left;
margin-left: 0px 0px 0px 30px;
width: 150px;
height: 38px;
}
Just tweak the CSS a little:
.logo{
width: 100px;
display: inline-flex;
}
.logo img{
margin: auto 5px;
float: left;
width: 150px;
height: 38px;
}
Does this work?
This solution worked for me, but I have no idea for you as you didn't put your full code...
Try adding float:left to .logo and setting display: inline-block on your h1, like so:
*{
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 34px
}
header{
background-image: url(../img/bar.png);
background-color: #00B9ED;
height: 75px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
.logo{
width: 100px;
float: left;
//display: inline-flex;
}
.logo img{
margin: auto 5px;
float: left;
width: 150px;
height: 38px;
}
h1 {
display: inline-block;
}
How about making margin-left: 0%; and margin-right. Depends where you want to move it.
You used shorthand for margin-left. We use shorthand for margin only. You did margin-left: top right bottom left instead. I don't think the program reads that correctly.
Related
I am using float: left to stack two divs side by side. I am then using clear: block to clear the float, but a small white space appears between the floated divs and the next div.
I have added overflow: none to every element on the page because I saw that as the solution that worked for other people with a similar issue, but that didn't fix the issue.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: -60px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
EDIT: I know I can add a negative margin-top to the '#featured' box, but I would really like to understand why this problem exists.
Try changing the inline-block to inline-flex
#featured-header {
display: inline-flex;
width: 240px;
height: 30px;
}
Set font-size: 0; on the parent element. The space is a character space, so setting the font-size to zero makes the size of the space zero as well. But, you'll need to set the font size of the inline-block child elements back to your desired size.
#featured-container {
position: relative;
width: 100%;
text-align: center;
margin-top: 0px;
font-size:0px;
}
#featured-header {
display: inline-block;
width: 240px;
height: 30px;
}
#featured-label {
float: left;
width: 160px;
height: 30px;
line-height: 30px;
text-align: center;
background: #EEEEEE;
font-weight: 700;
font-size:18px;
}
#featured-point {
float: left;
width: 0;
height: 0;
border-bottom: 30px solid #EEEEEE;
border-right: 30px solid transparent;
}
#featured {
display: inline-block;
width: 220px;
min-height: 220px;
padding: 10px;
background: #EEEEEE;
font-size:16px;
}
.clear {
clear: left;
}
<div id="featured-container">
<div id="featured-header">
<div id="featured-label">FEATURED</div>
<div id="featured-point"></div>
</div>
<div class="clear"></div>
<div id="featured">
</div>
</div>
I want my bordered div to look like:
neat and just wrapped around the div right under the two img divs. (Adding a hyphen or period separates the div to separate and lets it go below).
but instead, I'm getting
where it looks like it's going up and hooking to the above divs — ideas?
This is my css:
tallcrop {
width: 49%;
height: 55vh;
overflow: hidden;
float: left;
align: left;
display: inline-block;}
tallcrop img{
position:center;
height: 100%;
object-fit: cover;}
.leftside {
margin-top: .5%;
padding-right: 1%;
padding-bottom: 1.5%;
padding-top: 0%;}
.rightside {
margin-top: .5%;
padding-left: 1%;
padding-bottom: 1.5%;
padding-top: 0%;}
fluid box {
width: 100%;}
fluidbox p {
border: .06em solid black;
height: ;
font-face:'ag';
line-height: 1em;
font-size: 3em;
padding: 1%;
}
and HTML:
<!--Fires-->
<tallcrop class="leftside">
<img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c043674c0dbf745deee657/1505772425232/DSC_0909.jpg"></tallcrop>
<!--Small Editions-->
<tallcrop class="rightside"><img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c04447be42d644772fc2bf/1505772633670/Small_Editions1.jpg"></tallcrop>
<!--Fluid-->
<fluidbox>
<p>On the Democratic <font face="ab">Fluidity</font> of Digital Artist Books</p></fluidbox>
You are using float for the left and right alignment. If you are using this property you must need to use clear: both CSS property.
Elements after a floating element will flow around it. To avoid this, use the clear property or the clearfix hack as given below.
I have added this HTML tag below the tallcrop tag:
<div class="clearfix"></div>
Here is the CSS:
.clearfix {
clear: both;
}
Here is the demo:
tallcrop {
width: 49%;
height: 55vh;
overflow: hidden;
float: left;
align: left;
display: inline-block;}
tallcrop img{
position:center;
height: 100%;
object-fit: cover;}
.leftside {
margin-top: .5%;
padding-right: 1%;
padding-bottom: 1.5%;
padding-top: 0%;}
.rightside {
margin-top: .5%;
padding-left: 1%;
padding-bottom: 1.5%;
padding-top: 0%;}
fluid box {
width: 100%;}
fluidbox p {
border: .06em solid black;
font-face:'ag';
line-height: 1em;
font-size: 3em;
padding: 1%;
}
.clearfix {
clear: both;
}
<!--Fires-->
<tallcrop class="leftside">
<img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c043674c0dbf745deee657/1505772425232/DSC_0909.jpg"></tallcrop>
<!--Small Editions-->
<tallcrop class="rightside"><img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c04447be42d644772fc2bf/1505772633670/Small_Editions1.jpg"></tallcrop>
<!--Fluid-->
<div class="clearfix"></div>
<fluidbox>
<p>On the Democratic <font face="ab">Fluidity</font> of Digital Artist Books</p></fluidbox>
You can also edit it on Codepen.
It is because you haven't cleared your floats and also as you are using custom html elements, it doesn't know what type of element it is (ie inline, block, etc). You can fix your code with the following:
fluidbox { /* remove the space between fluid and box in your css */
width: 100%;
display:block; /* make it a block element */
clear:left; /* clear your left float */
}
Your fixed code:
tallcrop {
width: 49%;
height: 55vh;
overflow: hidden;
float: left;
display: inline-block;
}
tallcrop img {
position: center;
height: 100%;
object-fit: cover;
}
.leftside {
margin-top: .5%;
padding-right: 1%;
padding-bottom: 1.5%;
padding-top: 0%;
}
.rightside {
margin-top: .5%;
padding-left: 1%;
padding-bottom: 1.5%;
padding-top: 0%;
}
fluidbox {
width: 100%;
display:block;
clear:left;
}
fluidbox p {
border: .06em solid black;
line-height: 1em;
font-size: 3em;
padding: 1%;
}
.clearfix {
clear: both;
}
<!--Fires-->
<tallcrop class="leftside">
<img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c043674c0dbf745deee657/1505772425232/DSC_0909.jpg"></tallcrop>
<!--Small Editions-->
<tallcrop class="rightside"><img src="https://static1.squarespace.com/static/598ca765c534a5280a3fb1ef/t/59c04447be42d644772fc2bf/1505772633670/Small_Editions1.jpg"></tallcrop>
<!--Fluid-->
<fluidbox>
<p>On the Democratic
<font face="ab">Fluidity</font> of Digital Artist Books</p>
</fluidbox>
My banner is meant to be directly under the navigation bar but as of now, there is a space between it. I tried to use top for css and it doesn't move.
The css for the banner is:
/*Index CSS*/
* {
margin:0px; padding: 0px;
}
body {
position: absolute;
width: 1250px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#wrapper {
background-color: rgb(161, 193, 217);
position: absolute;
width: 1250px;
height: auto;
margin-left: 5px;
margin-right: 5px;
}
#welcome {
background: url(../Resources/Header/CUiZMwBXAAAQy1M.jpg);
width: 1250px;
height: 480px;
}
#WelcomeTo {
color: white;
font-size: 55px;
text-align: center;
font-family: Bebas;
margin-top: 100px;
}
#LittleChef {
color: white;
font-size: 60px;
text-align: center;
font-family: Candy Shop Personal Use;
}
<div id="welcome" name="banner">
<div id="WelcomeTo" name="WelcomeTo">
<h1>WELCOME<br>TO</h1>
</div>
<div id="LittleChef" name="LittleChef">
<h1>Little Chef</h1>
</div>
</div>
I've had this problem for a very long time. Here is a screenshot to what it looks like as of now.
it is because the margin of your h1 element.
the solution is set the margin-top of h1 to 0.
Or you can set the padding of the wrapper
I'm trying to get 2 divs on the same line, but alligned differently. Here is a pic of what I have right now and what I want:
[pic removed by poster]
and here is the code I've got:
<div class="newsdiv">
<div class="picdiv" style="background-image: url('[...]');"></div>
<div class="titlediv">
<font size="4">', $row['title'], '</font>
</div>
<div class="textdiv">
<font size="1">This is some dummy text</font>
</div>
<div class="linksdiv">
[Read More...]
<div class="statsdiv">
Views: 0 , Comments: 0
</div>
</div>
</div>
and the stylesheet:
.newsdiv{
overflow: hidden;
height: 126px;
width: 100%;
padding: 5px;
border: 2px solid black;
display: inline-block;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.picdiv{
width: 220px;
height: 110px;
border: 1px solid #444;
background-repeat: no-repeat;
background-position: center;
background-size: 382px 120px;
float: left;
}
.titlediv{
height: 20px;
text-align: center;
}
.textdiv{
overflow: hidden;
margin-top: 8px;
height: 70px;
text-align: center;
}
.linksdiv{
font-size: 8pt;
text-align: center;
height: 10px;
}
.statsdiv{
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
}
Any ideas of how to do this? Thanks!
You need float here
.statsdiv {
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
float: right; /* Add this */
}
May be there will be more cleaner solution but you can try this for now
.linksdiv > a{
margin-left:12%;
}
Updated Demo
You can use the position: absolute; on your .statsdiv and position:relative; on .linksdiv to achieve what you want. I guess using float will be too much for this.
Updated CSS(modified classes only):
.linksdiv{
font-size: 8pt;
text-align: center;
height: 10px;
position: relative; /*added*/
}
.statsdiv{
font-size: 7pt;
/* text-align: right; not required */
display: inline-block;
height: 10px;
position: absolute; /*added*/
right: -0.5%; /*added*/
}
FIDDLE
Consider this working css. Here is Demo
.statsdiv {
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
float: right;/*added*/
}
Add this to your .statsdiv css
float:right;
here is the fiddle http://jsfiddle.net/cc68d/
Edit :- Although this works, as pointed out by you , it does not align Read More[..] in center. Actually the issue is with the design part. I will not go into details. You can correct this by adding style="padding-left:100px;" to your ReadMore[..] <a> tag attribute.
as shown here http://jsfiddle.net/cc68d/1/
Replace your total css code, You need float on the class .statsdiv
Your total modified code is:
.newsdiv{
overflow: hidden;
height: 126px;
width: 100%;
padding: 5px;
border: 2px solid black;
display: inline-block;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.picdiv{
width: 220px;
height: 110px;
border: 1px solid #444;
background-repeat: no-repeat;
background-position: center;
background-size: 382px 120px;
float: left;
}
.titlediv{
height: 20px;
text-align: center;
}
.textdiv{
overflow: hidden;
margin-top: 8px;
height: 70px;
text-align: center;
}
.linksdiv{
font-size: 8pt;
text-align: center;
height: 10px;
}
.statsdiv {
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
float: right; /* Add this */
}
You could make your div go out of the flow making its position absolute :
.statsdiv{
font-size: 7pt;
text-align: right;
display: inline-block;
height: 10px;
position: absolute;
align: right;
padding: 0 15px;
width: 96%;
left: 0;
}
Needs a little tuning to make it right in all definitions though...
Add a third div with a width of how ever wide you need it with no content between them - a place holder div ...remember to float right , text align and a margin as well.
I'm probably turning mad but I really cannot seem to find out what I'm doing wrong. I'm simply trying to center my image.
<div class="container ">
<img src="design/images/logo.png" alt="logo" class="logo" />
<div class="contactData">
data
</div>
</div>
This is my CSS:
.container {
max-width: 978px;
width: calc(100% - 46px);
height: 300px;
margin: 0 auto;
padding-left: 23px;
padding-right: 23px;
.logo {
width: 337px;
height: 76px;
margin: 0 auto;
float: none;
}
.contactData {
max-width: 206px;
margin: 30px auto 0 auto;
text-align: center;
float: none;
}
The contactData div just centers fine but the image doesn't.
add display:block; in your .logo
That should probably fix it
Use either display: block; or display: inline-block; while you are using margin: auto; for the images.
.logo {
width: 337px;
height: 76px;
margin: 0 auto;
float: none;
display: block;
}
Images are inline by default and you need to trigger hasLayout or something similar.
add this code
.container {
max-width: 978px;
width: calc(100% - 46px);
height: 300px;
margin: 0 auto;
padding-left: 23px;
padding-right: 23px;
text-align: center;
vertical-align: middle;
You are not specifying any aligning for image.
In the container class, Just give
text-align:center;
In .logo just add display:block; in your CSS.