So I wanted to center my header... but I stumbled across a problem right away. I want to have a container that's going to have a repeating BG(stripe lines) and in the center I want a header with the logo and menu.
Thing is, I can't get the header div to center to the parent(container).
This is the HTML part
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="css/master.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<dic class="header">
<img src="images/logo.png" width="260" height="56">
</div>
</div>
</div>
</body>
</html>
and the CCS is
#charset "utf-8";
body {
background-color: #00162d;
}
.container {
width: 100%;
height: 100px;
background: url(../images/header_bg.jpg) repeat-x;
}
.header {
margin: 0 auto;
width: 980px;
}
Thanks in advance!
p.s. It's amazing how much you can forget if you don't code for 3 years!
<dic class="header">
Should be
<div class="header">
Working example: http://jsfiddle.net/dVvjm/
Related
I want to create my navbar something like this
Navbar
And this is what I have created one side div container but the curves are not perfect of my div and i need to make this for both sides for both side I will use flex box but my main focus is to create that same curves.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<style>
.left {
border-radius: 0px 5px 100px 0px / 100px 30px 100px 0px;
border: 0px solid #800000;
background-color: red;
padding: 10px;
height: 100px;
width: 500px;
}
</style>
<div class="left">
s
</div>
</body>
</html>
Thank you.
This should work here you go :)
The website you gave uses .svg images to create this curve effect.
And with display: flex; makes them inline.
<body>
<style>
* {
padding: 0;
margin: 0;
background: black;
}
.navbar {
display: flex;
}
</style>
<div class="navbar">
<div class="left">
<img src="https://techfest.org/2021/home/Navbar/Logo.svg">
</div>
<div class="right">
<img src="https://techfest.org/2021/home/Navbar/TN.svg">
</div>
</div>
</body>
This will need Javascript, search for burger navbar CSS design using Javascript on YouTube.
example
Ι'm trying to align two separate backgrounds in one html page, lets say the first part (in which it will be added a flexslider) and the remaining main-page. How can I exactly align these two backgrounds horizontally? Can you provide me an example? My code doesn't work well.
<style type="text/css">
#one {
background-image: url("http://www.fnordware.com/superpng/pnggrad8rgb.png");
repeat: no repeat;
width: 200px;
height: 300px;
position: absolute;
}
#two {
background-image: url("http://www.bit-101.com/blog/wp-content/uploads/2009/05/background.png");
repeat: no repeat;
width: 200px;
height: 300px;
position: absolute;
}
</style>
<div id="one"></div>
<div id="two"></div>
Demo
Thanks in advance
How about this?
> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
</style>
</head>
<body>
<div style="background-image: url(img/3.png);
width:1250px; height:1366px;">
</div>
<div style="background-image: url(img/two.png); width:1250px;
height:1366px;">
</div>
</body>
</html>
I am working on a project and for some reason I cannot get the banner placed in the position I want. There is code I am looking at hat has it set how I want to be:
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<header>
<h1>
<a href="index.html">
<img src="images/logo.png" alt="logo">
<!--<div>-->
They're Animals
<!--</div>-->
</a>
</h1>
</header>
</div><!--.container-->
</body>
</html>
and the CSS that works for my ideal banner is:
/* *************************************
Base
************************************* */
body {
background-color: #dfeff0;
color: #333333;
font-family: Arial, Helvetica, sans-serif;
}
header a { color: #ad235e;}
header a:hover { color: #000000;}
h1 {
color: #ad235e;
font-size: 14px;
}
h1 a:hover img { opacity: 0.7;}
/* *************************************
Modules
************************************* */
.container {
margin: 0 auto;
width: 90%;
max-width: 960px;
position: relative;
}
I have tried copying the CSS to put in my project (and the html) and it still does not work.
With actual text and more information in there it flows perfectly.
I guess something that might be more helpful is the code I have tried on my own:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<div class="container">
<header>
<h1>
<img src="images/banner.png" alt="banner">
<!--<body background="images/banner.png" alt="banner" >-->
Home Page
</h1>
</header>
</div>
and my attempt at CSS:
h1
{
text-decoration:underline;
text-align:center;
}
h1 img
{
height: 40%;
width: 40%;
margin: 0px 10px;
padding: 5px;
float: left;
}
.container
{
width: 80%;
max-width: 960px;
margin:0px auto;
}
I guess the simplest way to put this is I am trying to get my banner to be an appropriate size (though I can manage that by editing the width and height) to the left of my h1 without pushing everything making it seem that it is "alone".
I am not sure exactly what you want to do. But I am guessing as you are using float:left you are maybe facing problem with the class "container".
I believe you can add one line in your .container CSS and fix the problem.
overflow: auto;
I'm trying to make a banner that fills all the screen horizontally but it isn't working as expected. There's some space that isn't fullfilled with it like you can see here: http://i.imgur.com/12NrL7R.png
I'd appreciate some help, thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Best webpage ever</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="banner">
<ul id="menu">
<li>Home</li>
<li>Students</li>
<li>XXX tuga</li>
</ul>
</div>
<div id="container">
<div id="content">
<p>cona</p>
</div>
</div>
<div class="banner">
</div>
</body>
</html>
.banner{
background-color: black;
width: 100%;
height: 200px;
}
html, body {
margin:0;
padding:0;
}
Try this, the body/html by default has padding, so you might want to try to remove that...
body tag applies some spacing in most browsers. Be sure to have:
body {
margin: 0;
padding: 0;
}
add this to your css:
body{
padding:0px;
}
let me know if that helps
I am having two problems. The first one, is that I am getting a break in FF, IE and chrome between the top img and the logo. The second problem only appears in IE and what happens is there is a border around the logo. What am I doing wrong?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>2E Network - Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"><img src="Images/top_page.png" width="963" height="29"><div id="logo"><img src="Images/logo.jpg" width="921" height="272" alt="Logo" longdesc="/index.php"></div>
</div>
<div id="main">
</div>
<div id="footer"><img src="Images/bottom_page.png" width="963" height="50">
</div>
</div>
</body>
</html>
Seperate CSS style Sheet
body {
background-image: url(Images/bkg.png);
background-repeat: repeat-x;
}
#wrapper {
width: 963px;
margin: auto;
}
#main {
background-image: url(Images/wrapper_bkg.png);
background-repeat: repeat-y;
}
#logo {
background-image: url(Images/wrapper_bkg.png);
background-repeat: repeat-y;
}
#logoimg {
margin-left: 15px;
}
Check the current page here
to fix the gap make the top image to display:block;
and the border
you can see it here
http://www.jsfiddle.net/CcvTD/2/
edit:updated so the borders are removed too
This will get rid of the border:
#logoimg img {
border:0px;
}
To fix the gap, try:
#header img, #logo {
margin:0px;
}