I've been trying many techniques.. but none helped.
I tried "margin-bottom: 1em", "bottom: 2em", etc. but the element stays nearly invisible.
See the bottom of the page.. there is a sentence, which is used to be shown..
Here's the URI: http://Sulayman.org/
Can anyone help me? - Thanks!
Sure, increase the margin on the h1. You'll probably want to remove your inline styles and move them into classes and ID's.
<h1 style="font-size: 2.3em; text-align: center; margin-bottom: 0.5em;" class="title">
into
<h1 style="font-size: 2.3em; text-align: center; margin-bottom: 2.5em;" class="title">
"The Pixel Developer" is correct; you need to change the value of margin-bottom to 2.5em to move the footer farther down. I'm not sure why you are using inline styles instead of putting them in your stylesheet, but that is irrelevant to the problem. I changed your code in my browser and it works as you requested.
Related
I'm using Dokan plugin for my website. My problem is need to remove extra space between heading & banner (Check screenshot 1). And I find a solution using web inspect tool. If i change the padding-bottom to 0px its working fine.(check screenshot 2). so I try to find that CSS class in my website backend, i found a same CSS class regarding my issue but if I change it not working in my website.
The CSS class in martfury/style.css
.page-header-page .entry-title {
padding-top:0px;
padding-bottom:0px;
font-size: 48px;
font-weight: 600;
text-align: center;
margin-bottom: 0;
}
I search every CSS file but nothing found also try to clear data. Nothing help me. If any one know how to solve this please help me.
I'm really thankful for your time.
Just try with !important like given below
padding-bottom:0px !important;
I think you CSS not able to overwrite so !important will be work there.
I've been attempting to create a hero header in my Laravel 5.4 project. However, one certain thing doesn't seem to be working the way it's supposed to.
(If you're not familiar with what a hero header is; it's basically an image stretching over the entire screen used as a background upon first loading the website, usually with some text and a call to action on top of it.)
This is the way I've structured my code, based on research I've been doing:
home.blade.php:
#extends('layouts.app')
#section('content')
<div class="container">
#include('partials.hero')
</div>
#endsection
hero.blade.php:
<div class="hero-image">
<div class="hero-text">
<h1>Hero header</h1>
<p>Hero text</p>
<button id="hero-prim" class="button-primary">Action!</button>
<button id="hero-sec" class="button-secondary">Info</button>
</div>
and finally the css:
.hero-image{
background-image: url(/images/hero-image.png);
width: 100%;
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
The strange thing about this is that the text and the buttons are loaded with the page, but there's no sign of the image. Even if I exclude any other elements and try to only show the image, it gives me nothing.
This makes me think the issue must be in how I'm setting the background-image in my CSS, but I've no idea how I'd have to do it differently.
Any help or advice is greatly appreciated!
EDIT:
The image now displays properly, but doesn't stretch across the entire width of the screen, instead I think it only stretches across the section.
In any case, I'm not sure exactly which change in code made this happen, but after trying out some Bootstrap classes on it and defining the height of html and body as 100% (courtesy of VegaPunk), things have been better.
I'm sorry I can't define a more clear answer, but it's still a mystery to me, since yesterday none of these solutions seemed to work on their own.
I face the same problem and solved it just now. My css code was background: url(images/banner.jpg); and the error was Failed to load resource: the server responded with a status of 404 (Not Found). The solution is adding two dot '.' and a single slash '/' before images background: url(../images/banner.jpg);, Now the image has been appeared. My images and css folder in my project public folder and banner.jpg is in the images folder.
Your image should be located in your public folder. So create a folder in public called 'Images' with a capital I and place the hero-image.png inside the created folder.
Heights are really tricky in CSS. I suggest you use a framework like Bootstrap or Foundation.
It doesnt know 50% of what, you need to declare
html, body { height: 100%;}
A guy did a website for me and I'm trying to understand it. It's here:
http://www.brilliantzenaudio.com
Note that there's a logo image at the top left. I'm trying to understand where this came from. The relevant code seems to be partly in header.php and partly in app.css. From header.php,
<header class="banner" role="banner">
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-2">
<h1 class="logo"><?php bloginfo('name'); ?>">Brilliant Zen Audio</h1>
... stuff removed here, other items in header ...
</div>
</div>
</div>
</header>
And the app.css contains lines as follows. Looking at the php above, I see that there is a element of class "banner", so clearly there is css code addressing that (giving it a color, a position, border, and z-index). I also see that the header tag is also given the "role" of "banner". Does that serve any immediate purpose or is that for screen readers?
We can also see that the php contains h1 elements, and 'a' elements within 'h1' elements. CSS entries are there for those things. I'm not clear on what their purpose is. For one thing, the logo is an image. Why is it put in an h1 tag? I understand the need for the tag because the logo should be clickable (to get back to the home page). But what is put as the text of the link is some next (I'm not clear on how to parse the PHP there. What's clever is that the image gets put there because it's the background in an "h1.logo a" css entry.
I've added some general questions in comments below.
.banner { }
header.banner {
background:#603913;
position:relative; // question: what does this mean and how will it effect the position of things if I start moving or changing elements?
border-bottom:solid 1px #fff; // question: is this bottom border important for some reason?
z-index:9999; // what does this do?
}
h1.logo {
margin:0; // is there a need to define these on h1.logo?
padding:0;
}
h1.logo a {
display:block; // what is display:block and how does it affect appearance? How would it affect changes if I change the size or location of the logo?
text-indent:-9999px; // what is this?
background:url(../img/sm-logo.png) no-repeat 0 0;
width:101px; // what does it mean when you set the width and height of an <a>
height:103px;
margin:0 auto;
}
.banner { }
header.banner {
background:#603913;
position:relative; // This is set, so that the position:absolute of h1.logo a will work, and is also needed in order to make the z-index work.
border-bottom:solid 1px #fff; // Is responsible for the white line at the bottom of the header. It 's not important, but looks nice...
z-index:9999; // The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
}
h1.logo {
margin:0; // Yes, because normally an h1 has a top and bottom margin defined, with this setting, you set it to 0.
padding:0;
}
h1.logo a {
display:block; // Normally an a element has inline properties. By setting this to block you can use width, margin and other properties which aren't available for inline elements
text-indent:-9999px; // The text-indent property specifies the indentation of the first line in a text-block.
background:url(../img/sm-logo.png) no-repeat 0 0;
width:101px; // Sets the width of this a, because it is a block element.
height:103px;
margin:0 auto;
}
Whilst this isn't necessarily an answer as Veelen's response hit the nail perfectly on what each element does, but below is a screenshot of Google Chrome's Web inspector (Or Firebug for Firefox). Hover over any DOM Element and it'll tell you everything about it, click the CSS rules and modify anything on the fly.
Experiment with it, see how things look & feel and it's constructed. It's how most Developers test & see how changes would look without having to Code/Re upload, and whatever you touch & change during Web Inspector, aren't saved =)
I am stuck with a problem for quite a while now.I have googled and have tried almost all the responses and none of them has worked..
I have a PHP page which has following layout
<div id="wrapper">
<div id="header"/>
<div id="content"/>
<div id=footer/>
</div>
Now the contents of the content div comes from Db and usually takes up much more height than browsers window size.
Here is the CSS that I have used
#footer {
color: #707070;
clear: both;
min-height: 100px;
}
#content {
width: 100%;
min-height: 400px;
margin-bottom: 25px;
}
But when the size of that div increase the footer does not move below it rather the footer is shown in the middle of the content div but 1 layer below it.
Can anyone help me?
First thing I see is that you have no quotes around name of the ID, you need that.
Second thing is that, if everything you gave us is correct, I need to see your PHP to tell you what is wrong, and at least a screenshot of actual problem to be certain, but I think taht part of your php is loading before the footer and part after so it appears that footer is in the middle.
This is somewhat a very peculiar situation to me. Am not sure yet as to why this is happening but here goes. I have a particular div tag with class="sidehead" This class has some style attached as shown below
<style>
.sidehead {
background: none scroll 0 0 #105289;
//border-radius: 15px 15px 15px 15px;
color: #FFFFFF;
font-weight: 700;
padding: 3px 15px;
margin: 5px;
text-shadow: 0 0 2px #000000;
}
</style>
Now the purpose of this div is style the header of every item in the sidebar. however when I add 2 back to div's the blue color gets smeared over the previous div also. I am not sure as to why this is happening.
You can check the flawed effect on http://mashup2.sunnydsouza.com. Just check the sidebar and you will realize what i am talking about. The 2 items I am talking about are fetched using include() statements in php. They are the same scripts called twice.
echo '<div class="sidehead">Most Popular articles</div>';
include('widget_2.php');
echo '<br>';
echo '<div class="sidehead">Random articles</div>';
include('widget_2.php');
Can someone please help me solve this problem. Dunno why the blue color spreads over the first div also :(
It appears the problem is related to the floated items under the headings.
Try making that br one that clears, eg. <br style="clear:both">.
echo '<div class="sidehead">Most Popular articles</div>';
include('widget_2.php');
echo '<br style="clear:both">'; //CHANGE HERE
echo '<div class="sidehead">Random articles</div>';
include('widget_2.php');
This works for me when I change it in the inspect element console with Chrome.
Each of the elements brought in by your include statements have a style of 'float: left'. Removing them, (under 'Most Activities' and 'Recent') does the trick.
I examined it quickly, though I did not pin-point the exact error, I notice a lot of things you can do in order to improve code quality and ease debugging your error.
Firstly, <center> is, I believe, deprecated. Use <p align="center"> or use CSS instead.
Secondly, <br> is wrong, it should have been <br></br> , or alternatively <br />, although this is likely to be ignored by most browsers, it is not W3C compliant, and it is important to create a good habit.
Thirdly, your CSS is everywhere, this is bad. You see, there are three ways to do CSS,
(1) inline
<div style="some css here" >
(2) external file
<head> <link ...."yourCss.css" > </head>
(3) document-wide
<head> <style>some css here </style></head>
Avoid using all three methods, all mixed up, in different locations. Generally the best way is to use class and id to identify all elements you want to style, then have their css properties defined in an external CSS.
The problem seems to be CSS scope, the above methods each has different "scoping priority", so having them mixed up really complicate the priority of which style is applied to an element. Hope this helps.
//border-radius: 15px 15px 15px 15px;
above css style ignore
Use below
/*border-radius: 15px 15px 15px 15px;*/
Not sure but only css problem, its working
Removing float:left; from the Most Popular Articles container worked for me in Firefox.