I'm getting back into web design after a several year break, so a lot of the tips and tricks that I used on a regular basis before just don't seem to be working. I'm designing a guild website for my World of Warcraft guild for some practice, but I'm having issues getting the div background images to show up properly on the page.
The page consists of a container DIV, a header DIV, a Menu DIV, and a three column layout, followed of course by a footer div. Above the menu I have a little artistic background I'm susing, and I managed to get that one to show up; however, I can't get the proper image to show up above the left or right bars properly. I've searched the net a ton, and am still dumbfounded as to what I'm doing wrong. Here is a screen shot of what I sort of want the layout to look like: http://s19.postimage.org/7svzmuaf7/Layout_V2.jpg
Currently, this is what I'm getting when you visit the website in any major browser: http://cirquedufreak.net78.net/
There is obviously some differences in the two, as one is just a jpg, and the other is a css/html combo, and that I'm aware of. Thank you for any help you can provide.
Source Code:
index.php:
<?php
session_start();
include("wowarmoryapi/BattlenetArmory.class.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home - Cirque du Freak of Vashj</title>
<link rel="stylesheet" type="text/css" href="layout.css" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
<div id="container">
<div id="header"> </div>
<div id="menu">
<ul>
<li>Home</li>
<li>Roster</li>
<li>Forums</li>
<li>About</li>
<li>Contact</li>
<li>Books</li>
</ul>
</div>
<div id="leftbar">LEFTBAR</div>
<div id="content">
<div id="gmod">
<h1>Important Message</h1>
<p>This is where any "breaking news" or important information that you want to give to the players will be displayed.</p>
</div>
</div>
<div id="rightbar">
<p>For an invitation, contact one of the following players in game:</p>
<?php
?>
</div>
<div id="footer">©2012 Cirque du Freak Guild of Vashj; All Rights Reserved.<br />World of Warcraft and related images and materials are © Blizzard Entertainment.</div>
</div>
</body>
</html>
layout.css:
#charset "utf-8";
/* CSS Document */
/* CSS LAYOUT BEGIN */
body {
margin: 0;
padding: 0;
background-color: #000;
color: #FC3;
text-align: center;
}
div#container {
margin: 0 auto;
text-align: left;
width: 1024px;
height: auto;
}
div#header {
width: 1024px;
height: 147px;
background: url(images/v2_header.png);
}
div#menu {
width:1024px;
height: 70px;
text-align:center;
background: url(images/v2_menuBG.png);
}
div#leftbar {
float: left;
width: 170px;
height: 525px;
min-heigh: 150px;
background-image: url(images/v2_barBG.png) no-repeat;
display: inline-block;
background-position: top left;
}
div#content {
float: left;
width: 684px;
min-height: 50px;
height: 525px;
}
div#rightbar {
float: right;
width: 170px;
height: 525px;
min-height: 50px;
background-image: url(images/v2_barBG.png) no-repeat;
}
div#footer {
width: 1024px;
height: 50px;
text-align: center;
clear: both;
}
/* CSS LAYOUT END */
/* CSS MENU BEGIN */
#menu ul {
margin: 0;
padding: 0;
float: left;
list-style: none;
width: 1024px;
}
#menu ul li {
display: inline;
}
#menu ul li a {
float: left;
text-decoration: none;
padding: 10.5px 11px;
width: 140px;
color: #FF0;
font-weight: bold;
font-size: 24px;
background-color: transparent;
vertical-align: text-bottom;
}
#menu ul li a:visited {
color: #FF0;
}
#menu ul li a:hover, #menu ul li .current {
color: #F00;
text-decoration: underline;
background-color: transparent;
}
/* CSS MENU END */
/* LEFT BAR CSS BEGIN */
/* LEFT BAR CSS END */
/* CONTENT BOX CSS BEGIN */
#content div#gmod {
width: 500px;
height: 150px;
text-align: center;
border: #FFF 3px solid;
background-color: #000;
margin: 0 auto;
color: #FFF;
overflow-style: auto;
overflow: scroll;
overflow-x: hidden;
padding-left: 4px;
padding-right: 4px;
}
#content div#gmod h1 {
text-align: center;
color: #F00;
font-size: 24px;
font-weight: bold;
text-decoration: underline;
padding: 0px 5px;
/* CONTENT BOX CSS END */
/* RIGHT BAR CSS BEGIN */
/* RIGHT BAR CSS END */
/* FOOTER CSS BEGIN */
#footer {
color: #999;
text-align: center;
}
/* FOOTER CSS END */
Thank you very much for taking the time to assist me with this problem.
Don't use
background-image: url(images/v2_barBG.png) no-repeat;
but
background: url(images/v2_barBG.png) no-repeat;
background-image: url(images/v2_barBG.png) no-repeat; should be background-image: url(images/v2_barBG.png); background-repeat: no-repeat;
background-image: url(images/v2_barBG.png) no-repeat; <-- no-repeat should be declared seperatly like this: background-repeat: no-repeat;
Related
Im trying to make the anchor tag as button and trying to add some css on it but it is not clickable
Here is my html code.
I'm following a youtube tutorial, I followed the video 100% but mine is not working, Im sorry im just new in web developing thankyou for the help.
<body>
<!-- Welcome Page -->
<section id="ulambg">
<div class="ulambg container">
<div>
<h1>Eatwell</h1>
Ready to Eat
Ready to Cook
</div>
</div>
</section>
<!-- End Welcom Page -->
And this is the css I used in the program, is it because of the Java? I read some forum that says some java function wont work if you disabled your java on your machine.
#import url('https://fonts.googleapis.com/css2?family=Raleway:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 15px;
font-family: 'Raleway', sans-serif ;
}
a {
text-decoration: none;
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/*Welcome Page Section Ulambg*/
#ulambg {
background-image: url(./img/bg.jpg);
background-size: cover;
background-position: top center;
position: relative;
}
#ulambg::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .5;
}
#ulambg h1 {
color: white;
width: fit-content;
font-size: 4rem;
position: relative;
}
#ulambg .btnulam {
display: inline-block;
padding: 10px 30px;
color: blue;
background-color: transparent;
border: 2px solid blue;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: .1rem;
margin-top: 30px;
transition: .3s ease;
transition-property: background-color;
}
#ulambg .btnulam:hover {
color: white;
background-color: blue;
}
/*Welcome Page Sectio Ulambg*/
add z-index: -1 in #ulambg::after, it's background, should not cover the page.
Demo
if i understand u correct, u mean <a href="#".. <- Anchor tag isnt clickable?
If yes u need to give it a name like <a href="#goHere".. and this means the link points to an id somewhere on the page ( for example to: <img id="goHere" src="/img/pic.gif"...
I'm new to the stuff myself but hopefully i could help in any way :)
I tried searching and using the codes I found somewhere else where it suggests to put:
margin:0px;
, but it still doesn't resolve my issue about the GAP created between the divs of my file. Here's the code: [The first one's the Jquery, the second is for the CSS, and the last one is the body.]
jQuery(document).ready(function(){
var navOffset = jQuery(".nav").offset().top;
jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if(scrollPos >= navOffset){
jQuery(".nav").addClass("fixed");
}
else{
jQuery(".nav").removeClass("fixed");
}
});
});
body, html {
height: 100%;
background-color:#404040;
margin:0px;
}
.parallax {
background-image: url('images/bg.jpg');
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
font-size:0;
margin-bottom:0px;
}
.parallax1 {
background-image: url('images/bg.jpg');
height: 46%;
font-size:0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
ul.header{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width:100%;
top:0;
display: inline-block;
text-align:center;
background-color: #0d0d0d;
}
.nav{
z-index:999;
}
.navlink {
display: inline-block
}
.fixed{
position: fixed;
top:0;
width:100%;
background-color:#222422;
}
.nav-placeholder{
margin:0 0 40px 0;
}
.navlink a{
font-family: caviar;
display: block;
color: #f3f3f3;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size:15pt;
}
.navlink a:hover{
background-color: #f1f1f1;
color:#0d0d0d;
transition-duration: 0.4s;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 10px;
}
<body>
<div class="parallax"></div>
<div class="caption">
<span class="border"> WELCOME </span>
</div>
<div class="nav">
<ul class="header">
<ul class="header-content">
<li class="navlink">Home</li>
<li class="navlink"> Foods </li>
<li class="navlink"> Beverages </li>
</ul>
</ul>
</div>
<!-- Here's where the gap appears -->
<div id="content" style="height:300px;background-color:#f2f2f2;font-size:36px;text-align:center;">
<p>Sample Facebook Icon</p>
</div>
<div class="parallax1"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="{{ asset('/js/js.js') }}"></script>
Couple of reasons:
p element has margins.
.nav-placeholder class has margin-bottom: 40px;
ul.header (which should be div.header) is displayed as
inline-block and pushes its parent height - leave its default
display as block.
if you are referring to the gap between your nav links, it is because display: inline-block; creates a gap by inserting a space between the elements. One solution to fix this is to set the parent container font-size: 0;.
.nav{
font-size: 0;
}
https://jsfiddle.net/unueg9zL/
The <p> you are adding inside #content is adding the gap, p elements have a default margin=1em (added by the browsers). You should set that margin to 0px explicitly on your CSS rules
#content p {margin:0}
https://jsfiddle.net/hkuo8xdx/
I am trying to join the the footer-document to the index-file. But it does not work and I suspect there i something wrong with my css-file.
html {background: url("bakgrund.gif");}
/*https://pixabay.com/ Gratis bilder Creative Commons CC0*/
html { overflow-y: scroll;}
body {
background: white;
border: 1px solid #0000ff;
font-family: calibri, arial, sans-serif;
width: 750px;
margin: 25px auto;
padding: 0;
}
header {
height: 175px;
background-color: #edffff;
margin-top: -16px;
padding: 0;
}
nav {
height: 35px;
background-color: #edffff;
padding-left: 10px;
}
section {
width: 550px;
float: left;
min-height: 400px;
}
article {
width: 550px;
float: left;
background-color: yellow;
}
aside {
width: 200px;
float: right;
background-color: lightgrey;
}
footer {
clear: both;
position: relative;
height: 55px;
padding: 5px ;
text-align: center;
background-color: magenta;
}
address {
font-size: 12px;
font-style: normal;
}
/* Menykataloger */
ul {
margin: 0;
padding: 0;
}
#meny li {
display: inline;
padding: 5px 1px;
}
#meny li a {
margin: 0 5px 0 5px;
padding: 5px 15px;
text-align: center;
font-family: arial;
font-size: 13px;
font-weight: bold;
color: black;
border: 1px solid black;
border-radius: 5px;
background: yellow;
}
#meny li a:hover {
background: #CCEBFF;
color: black;
}
#meny a:link, #meny a:visited {
color: black;
text-decoration: none;
}
#meny a:active {
color: white;
}
#meny a#current {
background: white;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="stil.css" type="text/css">
</head>
<body>
<nav>
<ul id="meny">
<li>Hem</li>
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</nav>
<section>
<h2>Huvudrubrik</h2>
<p>Huvudinnehåll</p>
<article>
<h2>Rubrik 1</h2>
<p> Innehåll 1 med rubriker</p>
</article>
<article>
<h2>Rubrik 2</h2>
<p> Innehåll 2 med rubriker
</p>
</article>
</section>
<aside>
Nyhetsbrev H-spalt
</aside>
<?php include("fot.php"); ?>
The result is wrong with the interpretation of the border. It just encircles the head and not the whole area.
I Get your problem
why dont you start your file with < ? php at begining and close it at the end
instead which you've used like this => "< ? php include("fot.php");" ?> at the end of your second file if you can see.
and save the main html file with the extension .php
trust me nothing will happen to your html code all the html contents will run fine even if you save the file in .php
and the second thing is you can include in two ways
i.e
include 'filename';
or
require 'filename'; you better include at the starting of the file
who would know if that included file may come to use right from the begining
Thanking you!
I could not understand what you are trying to do, but your problem is due to float: left for section tag. There are many alternatives to float like flex and grid,, so don't prefer float. It will cause many problems. Your problem is listed here.
There is no problem with your php.
On my site for one particular page the logo is nudged down a few pixels, while on all the other pages it is not. The code is identical(at least I think it is) for all pages so I'm not sure what is causing the issue.
Here is a screen shot of a working vs non working:
Working:
Non-Working:
The code for both is shown below however for some reason, one of the pages doesn't render correctly
<body>
<div class="wrapper"><?php include("include/header.php"); ?>
header.php:
<header id="header">
<div id="logo">
<h1 class="hidden">Welcome</h1>
</div><!-- #logo -->
<?php include("getstageinfo.php");
switch ($currentStage)
{
case "0":
$home ="period0.php";
break;
case "1":
$home ="period1.php" ;
break;
case "2":
$home ="period2.php" ;
break;
case "3":
$home = "period3.php";
break;
}
?>
<nav id="nav">
<h1 class="hidden">Main Navigation</h1>
<a class="nav-item current" href="<?php echo $home ?>">HOME</a>
<a class="nav-item" href="news.php">NEWS</a>
<a class="nav-item" href="accounts.php">ACCOUNTS</a>
<a class="nav-item" href="logout.php">LOG OUT</a>
<div id="nav_edge"> </div><!-- #nav_edge -->
</nav><!-- #nav -->
</header><!-- #header -->
CSS:
body { background-color: #031311; margin: 0px; padding: 0px; width: 100%; position: relative; background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-position: center top; overflow-x:hidden; font-size: 14px; line-height: 1.6em; color: #2a2d32; }
#header { margin: 0px; padding: 0px; width: 100%; height: 350px; display: block; position: relative; overflow: hidden; }
#header #logo { background-image: url(../images/logo.png); background-repeat: no-repeat; background-position: center top; display: block; margin: 0px; padding: 0px; height: 450px; width: 100%; }
#header #nav { position: absolute; height: 50px; width: 455px; left: 50px; top: 298px; background-image: url(../images/nav_bg.png); background-repeat: repeat; background-position: left top; margin: 0px; padding: 0px; border-top-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #8C9791; border-bottom-color: #8C9791; border-left-color: #8C9791; }
#header #nav .nav-item { font-size: 14px; line-height: 50px; color: #E1E7EA; display: inline-block; padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 15px; font-style: italic; margin-top: 0px; margin-right: 10px; margin-bottom: 0px; margin-left: 15px; text-shadow: 1px 1px 1px #000; }
#header #nav #nav_edge { background-image: url(../images/nav_edge.png); background-repeat: no-repeat; background-position: left top; display: block; margin: 0px; padding: 0px; height: 52px; width: 40px; position: absolute; top: -1px; right: -40px; }
#header #nav .nav-item:hover, #header #nav .nav-item:focus { color: #FFF; }
#header #nav .nav-item.current { color: #2BD5CC !important; }
And here is the generated html for working:
And here's the non working:
for css purpose IE7 different from IE8 and they all differnet from FIREFOX, CHROME....
I dont see you specifying css file for IE7 using
<!--[if lte IE 7]>
<link href="/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
You need to have alternate css for IE7 in your page
I realised that it was to do with the include(); functions I was using before declaring the doctype. So I asked a new question. See below
PHP include() before doctype, causing a white space
I have a header and navbar (attached) then 2 input boxes below that. When I resize my screen to a smaller resolution, a scroller bar appears horizontally (which is weird as everything on the page is visible without scrolling), when I move this scroller bar, my header (with width 100%) cuts off and I just see the background underneath it. I have had this problem with multiple websites in the past, how do I fix it? My code is below.
assets/header.php
<html>
<link rel="stylesheet" type="text/css" href="/blog/assets/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/blog/assets/style.css">
<head>
</head>
<body>
<div class="header"><br><br><br>
<p>My Blog</p>
</div>
<div class="topnav" align="center">
HOME
LATEST
ALL
ABOUT
SEARCH
</div>
assets/style.css
#import url('https://fonts.googleapis.com/css?family=Indie+Flower');
body {
background-color: #D3D3D3;
margin: 0 0 100px;
font-family: "PT-Sans", sans-serif;
}
.header {
display: block;
width: 100%;
height: 200px;
background-image: url("./img/header-img.png");
background-repeat: no-repeat;
background-size: 100%;
background-size:cover;
background-position: center center;
}
.topnav {
background-color: #333;
overflow: hidden;
position: relative;
top: 0;
}
.topnav a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 100px;
text-decoration: none;
font-size: 17px;
text-align: center;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
.header p {
color: white;
font-size: 50px;
text-align: center;
vertical-align: middle;
font-family: 'Indie Flower', cursive;
}
index.php
<?php
include($_SERVER["DOCUMENT_ROOT"]."/blog/assets/header.php");
?>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Create Blog</title>
<form action="send.php" method="POST" class="form">
<input type="text" name="title" placeholder="Title" class="input"><br>
<textarea name="blog-text" placeholder="Blog" class="input"></textarea>
</form>
style.css
.input {
width: 50%;
}
.form {
position: relative;
left: 25%;
}
add this in your stylesheet to fill the header 100%
.header{
width: 100%;
margin-left: 0!important;
margin-right: 0!important;
}
Check if that css file is being accessed first. If so then have the following
.header {
display: block;
width: 100% !important;
height: 200px;
background-image: url("./img/header-img.png");
background-repeat: no-repeat;
background-size: 100%;
background-size:cover;
background-position: center center;
}
If still not working add lines one by one and see the effect.
Let me know if you require any further help
.form {
position: relative;
/* left: 25%; */
margin: 0 auto;
text-align: center;
}
If the margin property has three values:
margin: 25px 50px 75px;
top margin is 25px
right and left margins are 50px
bottom margin is 75px
so change your body tag to remove the left and right margin, may be that is why the full width is not filled
There's quite a few things that look wrong here, but I've shuffled your code into one document for testing purposes and it looks like the form is pushing over to the side, which is then making the page width wider, therefore allowing your header to go wider.
So you need to either remove the left: 25% from the form or make give it a width of less than 75%.
You need to be careful to maintain clean code, it looks like you'll end up with two 'head' tags from what you've posted, one of which is not needed and the other is not closed properly.
i have tested this and it worked.when the size of explore become small without any horizontal scroll bar
<?php
include($_SERVER["DOCUMENT_ROOT"]."/blog/assets/header.php");
?>
<style>
.input {
width: 50%;
}
.form {
left: 25%;
}
</style>
</head>
<body>
<continer>
<div class="header"><br><br><br>
<p>My Blog</p>
</div>
<div class="topnav" align="center">
HOME
LATEST
ALL
ABOUT
SEARCH
</div>
<div class="form" style=" text-align: center;">
<form action="send.php" method="POST" class="form">
<input type="text" name="title" placeholder="Title" class="input"><br>
<textarea name="blog-text" placeholder="Blog" class="input"></textarea>
</form>
</div>
</continer>
</body>
</html>