http://erickochphoto.com/avejoe/?page_id=14 is rendering fine in FF and IE, but fails in chrome.
I am using clear: both display: block / inline every where I can think of, but I am failing. Any ideas?
#main {
margin: 0;
padding: 0;
width: 800px;
min-height: 375px;
background: url(images/paper.png) repeat-y;
display: inline;
float: left;
}
#leftBackCopy
{
display: inline;
margin: 0px;
padding: 0px;
background: url(images/map.png) no-repeat;
width: 122px;
height: 426px;
float: left;
}
#rightBackCopy
{
display: inline
margin: 0px;
padding: 0px;
background: url(images/trimCam.png) no-repeat;
height: 195px;
width: 122px;
float: left;
}
#mainHolder
{
display: block;
clear: both;
margin: 0 auto;
padding: 0;
width: 1044px;
}
Try adding:
#mainHolder {
overflow:auto;
margin: 30px auto 0 auto;
}
Leave all the ither styles intact, just add the above. Worked for me, hope it works for you.
I didn't go too far into it, but deleting this portion of your HTML seems to fix the problem and put things in line (in Chrome):
<div class="menu"><ul><li >Home</li><li class="page_item page-item-14 current_page_item">Test</li></ul></div>
So, perhaps theres conflict within the CSS regarding the menu class or its unordered list.
Related
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.
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.
I'm having problems making my site look good in Firefox. I have a div and then two divs inside the first one and I want the two that are inside two be side by side. This is the HTML:
<div class="gluggi3">
<h2 class="aust">Veðurspá</h2>
<div class="vedurspa">Some content</div>
<div id="map-canvas">More content</div>
</div>
and then the CSS:
.gluggi3{
background-color: rgba(0,0,0,0.5);
padding: 10px;
margin: 10px;
border: solid;
border-color: magenta;
border-radius: 10px;
width: 100%;
}
.vedurspa {
display: block;
width: 50%;
float: left;
padding-right: 50px;
}
#map-canvas {
height: 300px;
width: 300px;
margin: 0px;
padding: 0px;
display: block;
}
This code works fine in Chrome but not in Firefox, in Firefox the div with the class 'vedurspa' dissappears. I tried using inline, inline-block and initialising left like suggested in other questions, but still no luck. Can anyone tell me how I can make them stay side by side in Firefox? Thanks in advance!
you have a padding-right: 50px; on .vedurspa, therefor they are not side by side, removing that would solve your problem
It's not a FireFox issue. When the viewport is to narrow, #map-canvas will start wrapping.
Consider this:
.gluggi3{
background-color: rgba(0,0,0,0.5);
padding: 10px;
margin: 10px;
border-color: magenta;
border-radius: 10px;
width: 100%;
}
.vedurspa {
width: 50%;
padding-right: 50px;
float: left;
}
#map-canvas {
height: 300px;
width: 100px;
margin: 0px;
padding: 0px;
float: left;
}
Fiddle: http://jsfiddle.net/vUvhq/
Also, remove your comma in the first .gluggi3 class
.gluggi3,{}
to
.gluggi3{}
I'm assuming you added the padding-right to .verdurspa so there would be space between the blocks.
Try adding float: right; to #map-canvas
This is the page: http://trozato.com/
I try to center the whole newsletter(mailchimp) div but it doesnt work. I have put the following code:
#mc_embed_signup {
margin: 0 auto;
so that it is centered. I want the dimensions to be 400px, also when I try to alter the dimensions of the submit buttons so that they are same, on the browser(chrome tools) with the following code it works but when I put it in the code NOT.
#mc_embed_signup input.button {
display: block;
width: 58%;
margin: 0 0 10px 0;
min-width: 90px;
}
the width: 58%; should do the work..no?
Easy: set the margin-left and margin-right of the Input elements to "auto".
Example CSS:
#mce-EMAIL
{
margin-left: auto;
margin-right: auto;
}
#mc-embedded-subscribe
{
margin-left: auto;
margin-right: auto;
}
Try this:
#mc_embed_signup input.button {
display: block;
width: 35%;
margin: 0 auto;
min-width: 90px;
}
#mc_embed_signup input.email {
display: block;
padding: 8px 0;
text-indent: 5px;
width: 58%;
min-width: 130px;
}
I can't make two areas of content float beside each other without disrupting my container. I have the first area cued to float:left but when I cue float:right to content area 2 my container doesn't work anymore.
The object does float right but the container disappears.
Here is my website http://aasdsafasdf.weebly.com/ (I'm in the very early stages)
#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
}
#content {
float: left;
height: auto;
width: 710px;
}
#content2 {
float: right;
height: auto;
width: 350px;
}
There are some markup errors on your page (notice the </script> tag after one of your links to a stylesheet?) but just set your container to hide overflow:
#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
overflow:hidden
}
#content2 {
height: auto;
width: 350px;
float:right;
}
That should fix the issue. But make sure you fix up your code... it has a variety of issues now: http://validator.w3.org/check?uri=http%3A%2F%2Faasdsafasdf.weebly.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
#container {
width: 1100px;
margin: 0 auto;
background: #ffffff;
}
#content {
float: left;
height: auto;
width: 710px;
display: block;
}
#content2 {
float: left;
height: auto;
width: 350px;
display: block;
}
You want both content div's to float left and be display:block;, then they will push up against the one to its left.