I have used Safari to view my layout up until now. Everything appeared perfectly as I wanted it to in Safari, a simple layout with a logo, navigation bar, header image, and then a two column body area. However, in Firefox, both the header image and logo are not even displaying, and the two column float for the body area is not working and instead sinking into one... I am not sure what is going on, or what types of problems I will encounter in other browsers, but maybe someone can find what is wrong:
body {
background-color: some color;
background-attachment:fixed;
margin: 0;
padding: 0;
}
#wrapper {
width: 950px;
background-color: some color;
margin: 0 auto;
text-align: left;
border-right: 1px solid some color;
border-left: 1px solid some color;
}
#logo {
background-image: url('some url');
height: 100 px;
text-align: left;
border-style: none;
}
#navigation {
background-color: some color;
text-align: center;
border-top: 2px solid some color;
border-bottom: 2px solid some color;
height: 30 px;
}
#navigationElement {
display: inline-block;
padding-top: 2 px;
padding-left: 10 px;
padding-right: 10 px;
border-style: none;
}
#navigationElement a:link {
color: some color;
text-decoration: none;
}
#navigationElement a:hover {
color: some color;
font-weight: bold;
}
#headerImg {
background-image: url('some url');
height: 200 px;
text-align: left;
border-style: none;
}
#left {
background-color: some color;
width: 475 px;
float: left;
text-align: center;
border-style: none;
}
#leftElement {
background-color: some color;
padding: 40 px;
text-align: center;
border-style: none;
}
#right {
background-color: some color;
width: 475 px;
float: right;
text-align: center;
border-style: none;
}
#rightElement {
background-color: some color;
padding: 40 px;
text-align: center;
border-style: none;
}
#footer {
background-color: some color;
height: 40 px;
text-align: left;
border-style: none;
clear: both;
}
Here is the html code:
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="navigation">
<div id="navigationElement">nav 1</div>
<div id="navigationElement">nav 2</div>
<div id="navigationElement">nav 3</div>
</div>
<div id="headerImg"></div>
<div id="bodyArea">
<div id="left">
<div id="leftElement">
left element text 1
</div>
<div id="leftElement">
left element text 2
</div>
</div>
<div id="right">
<div id="rightElement">
right element text 1
</div>
<div id="rightElement">
right element text 2
</div>
</div>
<div id="footer">some footer text</div>
</div>
</body>
It's probably because you are using spaces between values and px in height attributes (i.e height: 100 px; should be height: 100px;). Different browsers handle these kind of errors differently, so it's always a good idea to validate your css when you're having weird errors: http://jigsaw.w3.org/css-validator/
Remove the spaces between your pixel values.
height: 100 px; to height: 100px;
Related
I have figured out a new problem in TCPDF (new for me), ie I can't place elements next to each other. I have tried so many solutions but they were zero in the end. Seems like TCPDF doesn't support the converting from all the css attributes. Hope you can help ;)
The code I had tried:
<style>
.protHeader{
position: relative;
border: 2px solid black;
display: table;
height: 250px !important;
}
.protHeader div{
width: 100%;
}
.protHeader div img{
position: relative;
display: inline-block;
float: left;
height: 100px;
overflow: hidden;
}
.protHeader div a{
position: relative;
display: inline-block;
text-align: right;
horiz-align: right;
overflow: hidden;
float: right;
font-weight: bold;
font-size: 50px;
width: 40% !important;
}
</style>
And the html:
<div class="protHeader">
<div class="fl_left">
<div style="border: 1px solid black;"><img src="$LogoN"></div>
<div style="border: 1px solid black;"><a>$protocol</a></div>
</div>
</div>
Thanks in advance for the answers!
Maybe this is your problem:
You are adding this:
.protHeader div{
width: 100%;
}
that means, that every <div> in your class .protHeader has 100% width.
EDIT: (i change the last part of the css and colored the inline-block divs red, for viewing that they should stay next each other)
Try to remove this line or change your styling to:
.protHeader{
position: relative;
border: 2px solid black;
display: table;
height: 250px !important;
}
.protHeader .fl_left{
width: 100%;
}
.protHeader div img{
position: relative;
display: inline-block;
float: left;
height: 100px;
overflow: hidden;
}
.protHeader div a{
position: relative;
display: inline-block;
text-align: right;
overflow: hidden;
float: right;
font-weight: bold;
font-size: 50px;
width: 40% !important;
}
.protHeader .fl_left div {
background-color: red;
display: inline-block;
}
<div class="protHeader">
<div class="fl_left">
<div style="border: 1px solid black;"><img src="$LogoN"></div>
<div style="border: 1px solid black;"><a>$protocol</a></div>
</div>
</div>
Okay, found a method, I had changed the whole framework to another (dompdf), which is easier to use and supports the newer CSS too.
When two inline-block divs have different heights, why does the shorter of the two not align to the top of the container? (DEMO):
.container {
border: 1px black solid;
width: 320px;
height: 120px;
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
How can I align the small div at the top of its container?
Because the vertical-align is set at baseline as default.
Use vertical-align:top instead:
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align:top; /* <---- this */
}
http://jsfiddle.net/Lighty_46/RHM5L/9/
Or as #f00644 said you could apply float to the child elements as well.
You need to add a vertical-align property to your two child div's.
If .small is always shorter, you need only apply the property to .small.
However, if either could be tallest then you should apply the property to both .small and .big.
.container{
border: 1px black solid;
width: 320px;
height: 120px;
}
.small{
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
vertical-align: top;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
vertical-align: top;
}
Vertical align affects inline or table-cell box's, and there are a large nubmer of different values for this property. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align for more details.
Use display: flex property for the parent div
The flexbox items are aligned at the start of the cross-axis.
By default, the cross-axis is vertical. This means the flexbox items will be aligned vertically at the top.
So when you apply the display: flex property to the parent div, it sets its child elements with vertical-align: top.
See the following code:
.container {
border: 1px black solid;
width: 320px;
height: 120px;
display: flex;
/** CSS flex */
}
.small {
display: inline-block;
width: 40%;
height: 30%;
border: 1px black solid;
background: aliceblue;
}
.big {
display: inline-block;
border: 1px black solid;
width: 40%;
height: 50%;
background: beige;
}
<div class="container">
<div class="small"></div>
<div class="big"></div>
</div>
Browser Compatibility: Flexbox is very well supported across modern browsers.
<style type="text/css">
div {
text-align: center;
}
.img1{
width: 150px;
height: 150px;
border-radius: 50%;
}
span{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type='password' class='secondInput mt-4 mr-1' placeholder="Password">
<span class='dif'></span>
<br>
<button>ADD</button>
</div>
<script type="text/javascript">
$('button').click(function() {
$('.dif').html("<img/>");
})
Add overflow: auto to the container div.
http://www.quirksmode.org/css/clearing.html This website shows a few options when having this issue.
I am working on my code to create a green circle with your name on it with an arrow and border just like the one that google use.
please find the sample image below.
I have already created a green circle and a name using css and html which you can see it here.
<div class="profileImage">
<span id="profilename" class="profilename"></span>
<div class="flex-container">
</div>
</div>
.profileImage {
-webkit-background-size: 32px 32px;
background-size: 32px 32px;
background-color: green;
-webkit-border-radius: 50%;
border-radius: 50%;
display: block;
float: right;
margin-right: 18px;
margin-top: 12px;
overflow: hidden;
position: relative;
height: 32px;
width: 32px;
z-index: 0;
}
.profilename {
text-align: center;
color: white;
font-size: 14px;
line-height: 32px;
margin-left: 5px;
font-weight: bold;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
$(document).ready(function() {
var firstName = 'Robert';
var lastName = 'Jones';
var intials = firstName.charAt(0)+""+lastName.charAt(0);
document.getElementById("profilename").innerHTML = intials;
});
When I click on a green circle, I want to display the overlay with a border but I have got no idea how to do this. I tried to find it on google but I couldn't find it.
Can you please show me an example how I can display the overlay with a grey border that come with my first name, last name, email address and a signout button?
Thank you.
Ok I'll get you started with an overlay that includes an arrow with a border around the whole thing.
Basically, you're doing a bit of "visual miss direction". We used CSS borders to generate a triangle of the SAME color as the box background. This gets positioned its (height - border width) above the box. This puts the triangle OVER the top of the border, effectively hiding it.
Then there's a second triangle with a color that matches the border of the box. We position this triangle BEHIND the first triangle (using z-index) and offset the second triangle the border width from the first. This makes for a "fake" border because only the border width of the second triangle shows.
body {
margin: 50px;
}
.overlay {
position: absolute;
width: 300px;
height: 200px;
// styling
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
border-radius: 4px;
}
.arrow {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
top: -9px;
right: 10px;
}
.arrow:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #ccc transparent;
left:-10px;
top:-1px;
z-index:-1;
}
<div class="overlay">
<div class="arrow"></div>
<div class="overlayContent">
</div>
</div>
We used two elements (arrow and content) inside the overlay wrapper because we're rounding the corners using overflow:hidden this would cause our arrows to be cut off as well. So instead we'll have an extra container. The content area uses flexbox to push the button bar to the bottom regardless of the size. There are other ways to do this but this is easy.
body {
margin: 50px;
}
.overlay {
position: absolute;
width: 300px;
height: 200px;
// styling
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
border-radius: 4px;
}
.arrow {
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #fff transparent;
top: -9px;
right: 10px;
}
.arrow:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
border-color: transparent transparent #ccc transparent;
left:-10px;
top:-1px;
z-index:-1;
}
.overlayContent {
position:absolute;
z-index: 1;
top:0; right:0; bottom:0; left:0;
overflow:hidden;
border-radius: 4px;
display:flex;
flex-direction: column;
justify-content: space-between;
}
.top {
flex-basis: 70%;
}
.bottom {
flex-basis: 30%;
border-top: 1px solid #ccc;
background-color: #f5f5f5;
}
<div class="overlay">
<div class="arrow"></div>
<div class="overlayContent">
<div class="top"></div>
<div class="bottom"></div>
</div>
</div>
That's the fundamentals of the overlay. Try filling in the content you want and ask more questions if you need help.
I'm pretty new to programming/web development (this is my first website essentially) and for some reason, my footer on the index.php page does not have any padding on the top (every other page the footer is perfectly fine).
Index.php
<?php
include('includes/header.php');
?>
<div class="main-body">
<div id="box-1">
<h2>WELCOME TO</h2>
</div>
<div id="box-2">
<h2>TOTALLY<br> EDUCATIONAL</h2>
</div>
</div>
<?php
include('includes/footer.php')
?>
footer.php
<footer>
<h5>© 2019 Totally Educational. All Rights Reserved.</h5>
</footer>
</body>
</html>
style.css(index)
/*INDEX PAGE*/
/*side-by-side box structure*/
.main-body {
box-sizing: border-box;
display: inline;
padding: 0;
margin: 0;
border: 0;
font-size: 10px;
text-align: center;
}
#box-1 {
width: 49.5%;
background-color: rgba(126,121,121,1.00);
float: left;
height: 600px;
border-right: solid;
border-right-width: 2px;
}
#box-2 {
width: 50%;
background-color: white;
float: left;
height: 600px;
}
/*side-by-side box styling*/
#box-1 h2 {
padding: 300px 0;
letter-spacing: 5px;
color: white;
}
#box-2 h2 {
padding: 300px 10%;
letter-spacing: 5px;
}
style.css(footer)
#footer, #footer h5 {
background-color: black;
color: white;
padding: 20px 0;
margin: 0;
text-align: center;
width: 100%;
}
Above is all the PHP and CSS relevant to the problem. Basically, when I run it the index page footer h4 has no padding at the top and there's a white strip underneath it. For every other page, this problem didn't occur, only in the index.php. I wrote all this in the span of 3 or so days and I'm just starting to learn everything so it's probably some stupid newby thing I've done but any help would be much appreciated. I'll also attach some images of what it looks like.
index.php screenshot
games.php screenshot
-jEK01
Try use inline-block for .main-body, and add clear:both; to #footer:
.main-body {
box-sizing: border-box;
display: inline-block;
padding: 0;
margin: 0;
border: 0;
font-size: 10px;
text-align: center;
}
#footer, #footer h5 {
background-color: black;
clear:both;
color: white;
padding: 20px 0;
margin: 0;
text-align: center;
width: 100%;
}
I'm currently developing a wordpress theme with PHP, but my problem is with the css. I have tree divs, which i have inside a parent div. The parents div is by default 100%, so i want to specify the parent div (class: "single-general-sec1"). I've tried to calculate how wide the parent div should be in order for me to center it, but my calculations do not work. Please help.
Parent div should, by my calculation, be: 61% + 425px, but that dosen't work.
.single-general-sec1 {
margin-top: 150px;
margin-bottom: 150px;
height: auto;
width: calc(61% + 425px);
background-color: red;
}
.single-btype-div {
width: 250px;
display: inline-block;
float: left;
}
.single-gen-header {
font-size: 14px;
color: #D9D9D9;
font-family: "Roboto";
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin: 0;
width: auto;
}
.single-gen-desc {
color: #000;
font-family: "Roboto";
font-size: 28px;
font-weight: 300;
letter-spacing: 3px;
margin: 0;
width: auto;
margin-top: 5px;
}
.single-description-div {
width: 55%;
display: inline-block;
margin-left: 3%;
float: left;
}
.single-description-desc {
color: #000;
font-family: "Roboto";
font-size: 20px;
font-weight: 300;
letter-spacing: 1px;
margin: 0;
width: auto;
margin-top: 5px;
}
.single-live-button {
margin-top: 5px;
width: 175px;
height: 40px;
background-color: #8AA6B6;
border-radius: 8px;
border: none;
color: #fff;
font-size: 15px;
font-family: "Roboto";
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
.single-live-div {
width: 100px;
display: inline-block;
margin-left: 3%;
}
<div class="single-general-sec1">
<div class="single-btype-div">
<p class="single-gen-header"> - Typ av projekt </p>
<p class="single-gen-desc">
<?php the_field('project-type'); ?> </p>
</div>
<div class="single-description-div">
<p class="single-gen-header"> - Beskrivning </p>
<p class="single-description-desc">
<?php the_field('description'); ?> </p>
</div>
<div class="single-live-div">
<p class="single-gen-header"> - Se live </p>
<a href="<?php the_field('page-url') ?>"><button class="single-live-button">
Besök sida > </button></a>
</div>
</div>
You cannot center a div using % values for width. Also the calculation is wrong: 250px + 175px + 100px = 525px so, the parent div should be 525px in order to fit nested divs. But you should normalize HTML first. Or just use bootstrap.css.
Another thing. For center a div you can use display:inline-block then on his parent use text-align:center.
Or when you have a fixed width, margin:50px auto;