When I open the page on the phone it is not centered instead all goes to the left side, whereas when I open it on the computer everything looks nice.
I tried to add and remove codes to the page for example add min-width/max-width,change valutes - %/px .
HTML--------------
<html>
<head>
<title> Farbawlesie </title>
<link rel="stylesheet" type="text/css" href="styl.css">
<meta http-equiv="Imagetoolbar" content="no" />
<link rel="icon" type="image/png" href="naszywka3.gif">
<link rel="shortcut icon" href="farbawlesie.pl/favicon.ico">
<meta charset= "UTF-8">
</head>
<body oncontextmenu="return false" background="las.jpg">
<div id="page-wrap">
<div id="baner">
<img src="banern.png" height="250">
</div>
<hr color="white">
<br><br><br>
<center>
<div id="menu">
<ol>
<li><font color="yellow">⇒</font> Start</li>
<li><font color="yellow">⇒</font> O nas
<ul>
<li>
Drużyna
</li>
<li>
Zasady
</li>
</ul>
</li>
<li><font color="yellow">⇒</font> Terminarz</li>
<li><font color="yellow">⇒</font> Forum</li>
<li><font color="yellow">⇒</font> Galeria</li>
<li><font color="yellow">⇒</font> Kontakt</li>
</ol>
</div>
</center>
<br><br><br><br>
<hr color="white">
<br><br><br><br>
<font size="5" color="white" family="Times">
Witaj na naszej stronie ! ☺
<br>
Masz pytanie ? Skontaktuj się z nami ! Więcej w zakładce "Kontakt".
<br><br>
<center>
<div id="srodek_naglowek">
<img src="dr.jpg" width="850px" height="420px"/>
<img src="baner.png" width="850px" height="420px" />
<img src="farba.jpg" width="850px" height="420px"/>
<img src="far6.jpg"width="850px" height="420px"/>
<img src="3.png" width="850px" height="420px"/>
<img src="swt.jpg" width="850px" height="420px"/>
</div>
<center>
<br><br><br><br>
<hr color="white">
<br><br>
<center>
<font color="red"><h2>Naszywki członków drużyny</h2></font>
<img src="naszywka3.gif">
<font size="3" color="white">Otrzymuje każdy członek</font>
<br><br><br>
<img src="naszywka2.gif">
<font size="3" color="white">Otrzymuje osoba która brała 3 razy udział w nocnym strzelaniu</font>
<br><br><br>
<img src="naszywka1.gif">
<font size="3" color="white">Otrzymuje osoba która ma 5 letni staż w stowarzyszeniu</font>
<br><br><br>
<hr color="white">
<div id="stopka">
Copyright © Wszelkie prawa zastrzeżone
</div>
</div>
</body>
</html>
CSS-----------------
head {
text-align: center;
}
body {
width: 100%;
margin: auto;
}
#srodek_naglowek {
text-align: center;
}
#baner {
text-align: center;
}
a {
text-decoration: none;
color: white;
text-align: center;
}
#page-wrap {
width: 100%;
margin: 0 auto;
}
#menu {
text-align: center;
width: 100%;
font-family: Arial;
}
ol {
text-decoration: none;
color: white;
list-style-type: none;
padding: 0;
margin: 0;
font-size: 18px;
height: 2em;
line-height: 2em;
text-align: center;
}
ol > li {
float: left;
width: 150px;
}
ol > li > a: hover {
color: grey;
}
ol > li: hover {
}
#stopka {
color: white;
text-align: center;
font-size: 10px;
}
ol {
}
ol > li > ul > li {
}
ol > li > ul > li: hover {
}
ol > li > ul > li: hover a {
color: grey;
}
ol > li > ul {
display: none;
}
ol > li: hover > ul {
display: block;
}
ol > li > ul {
display: none;
}
ol > li: hover > ul {
display: block;
}
WEBSITE:
http://www.farbawlesie.pl
Your header image has a hard-coded width of 1300px. In smaller screen sizes, there is no room to fit the image, so you're seeing the overflow. Adding the following CSS is one way to fix this:
#baner img {
max-width: 100%;
height: auto;
}
The main culprit would be the hard-coded dimensions on the images. If you set width and/or height on the image, the browser will not recalculate its size and stretch some of the divs just to fit them in.
The quickest fix would be to remove the height from this image by changing this:
<img src="banern.png" height="250">
to this:
<img src="banern.png">
and then allowing this image to take 100% width:
#baner img {
width: 100%
}
This however won't center align your other row of images.
To help the situation, you could update your body properties with overflow-x:hidden, to remove the scroll in the bottom.
Related
As my title suggests, my content goes off screen.
I've looked through my css file, and there's isn't any margins with minus something. So why is the content going off screen at both sides?
Appreciate any suggestions to why this is.
Thanks.
body{
background: linear-gradient(rgb(100,50,50), rgb(80,20,20)) no-repeat;
color: white;
text-align: center;
font-family: 'Open Sans', sans-serif;
}
img{
margin: 1%;
}
/*Header*/
header {
background-color: #1d1e21;
height: 100vh;
position: relative;
}
header span {
color: #fff;
}
header input {
margin-top: 20px;
}
p#slogan {
color: #fff;
letter-spacing: 2px;
}
ul {
list-style-type: none;
}
ul li {
display: inline;
padding: 0 0 0 10px;
}
ul li a {
color: #fff;
list-style-type: none;
}
ul li a:hover {
color: black;
list-style-type: none;
text-decoration: none;
}
/*Main*/
/*sloganAndSocial*/
#sloganAndSocial {
background-color: #1d1e21;
position: absolute;
bottom: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>NBC 2011</title>
<link rel="stylesheet" href="css/main.css" type="text/css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
<!--Header section-->
<header>
<div id="topBar">
<div class="row">
<h1 class="pull-left"><span>NORDIC </span>BARISTACUP</h1>
<form class="pull-right">
<input type="text" name="search" placeholder="Search..">
</form>
</div>
<div class="row">
<p class="pull-left" id="slogan">be together act together learn together</p>
<ul class="pull-right">
<li>ABOUT NBV</li>
<li>2011 EVENT</li>
<li>NORDIC ROASTER</li>
<li>RESULTS</li>
<li>LINKS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<!--Main section-->
<div class="main">
<img src="" alt="bo!" class="cover" />
</div>
<div id="sloganAndSocial">
<div class="container">
<div class="row">
<h2 class="pull-left">"To create an environment in which knowledge<br>about coffee and its sphere can be obtained"</h2>
<ul class="share-buttons">
<li><img alt="Share on Facebook" src="images/flat_web_icon_set/inverted/Facebook.png"></li>
<li><img alt="Tweet" src="images/flat_web_icon_set/inverted/Twitter.png"></li>
<li><img alt="Share on Google+" src="images/flat_web_icon_set/inverted/Google+.png"></li>
<li><img alt="Pin it" src="images/flat_web_icon_set/inverted/Pinterest.png"></li>
<li><img alt="Send email" src="images/flat_web_icon_set/inverted/Email.png"></li>
</ul>
</div>
</div>
</div>
</header>
<!--Section1-->
</body>
</html>
You have two divs in your topBar with class row but which are not inside an element with class container. That is not intended by Bootstrap and therefore leads to unintended behaviour. You have to wrap those two divs in another div with class container.
Also, as #nik_m mentioned: Why are you wrapping the whole page in a header? That's not, what headers are supposed to do.
Remove pull-left and pull-right classes from the elements and better use flexbox for your alignments. It will make your life much easier!
Also, why the wrapper of the whole site is inside a header???
I am trying to style a web page using css. For some reason my header does not spread over where the header should be, which means the width is not 100%. it looks like this now this is the screenshot
header {
width: 100%;
}
#logo_picture {
margin-left: 80px;
}
#logo img,
#logo nav {
float: left;
}
#logo nav {
line-height: 120px;
margin-left: 250px;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline;
}
nav a {
color: black;
font-size: 20px;
font-family: 'Arsenal', 'sans-serif';
font-weight: 300;
padding: 2px 38px;
text-decoration: none;
}
nav a,
nav a:visited {
color: black;
}
nav a.selected,
nav a:hover {
color: grey;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Larry Rosenburg Official Website</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
</head>
<body>
<header>
<div id="logo">
<img src="lincoln.jpg" width="30%" alt="Lincoln logo" id="logo_picture">
<nav>
<ul>
<li> Home
</li>
<li> Lincoln
</li>
<li> About
</li>
<li> Contact
</li>
</ul>
</nav>
</div>
</header>
<h1> Larry Rosenburg </h1>
<p>
I believe that as important as skills and experiences are in our professional careers, it is the relationships that we create which allow us to truly succeed. My company provides title insurance, settlement, escrow and exchange services on a level that
is second to none, but my focus is helping your succeed with your commercial and residential transactions. As a person who can deliver a full range of solutions, I am able to leverage the power of my company with my drive to be concerned with your
company.
</p>
<div id="profile-pic">
<img src="picture.jpg" width="35%" alt="">
</div>
</body>
<footer>
</footer>
</html>
After every float you must create a clear class. Try adding in the CSS:
.clearfix {
clear: both;
}
in the html after the </header> add <div class="clearfix">
Is it possible to make the image menu keep highlighted when hovering on its subitem? I have 5 navigation menu items but only has has a dropdown. Everytime I hover on subitems of About Us(which the one I'm taking about), the About Us image turns back to it's original image.
JFiddle:
Is there a workaround for this? My friend says it is not possibe, but I'm not fully convinced.
And this is my code (for reference)
<html>
<head>
<title>CTI | About us</title>
<script type="text/javascript" rel="javascript" src="jquery-1.10.2.min.js"></script>
<script>
function over(me){
me2=me;
if(me=='about'){
$('#id_About').attr('src','images/hover-aboutus.jpg');}else{$('#id_About').attr('src','images/aboutus.jpg');}
if(me=='partners') {
$('#id_Partners').attr('src','images/hover-partners.jpg');}else{$('#id_Partners').attr('src','images/partners.jpg');}
if(me=='products'){
$('#id_Products').attr('src','images/hover-products.jpg');}else{$('#id_Products').attr('src','images/products.jpg');}
if(me=='contactus'){
$('#id_Contactus').attr('src','images/hover-contactus.jpg');}else{$('#id_Contactus').attr('src','images/contactus.jpg');}
}
$( document ).ready(function() {
me2='about';
$('#id_About').attr('src','images/hover-aboutus.jpg');
});
</script>
<style type="text/css">
img {
border: 0;
}
a { text-style:none; }
body {text-align: center; margin: 0; padding: 0;}
#wrapper { width:830px; margin:0 auto; }
</style>
</head>
<body>
<input id="data2" type="hidden" value="<?php if (isset($_POST['data2'])){echo $_POST['data2']; }else{} ?>">
<div id="wrapper">
<table width="830px" border=0 cellspacing=0 cellpadding=0 >
<tr>
<td valign="top" align="left"><img src="images/cti-logo.png" /></td>
<td valign="bottom" align="right">
<a href="welcome.php">
<img src="images/home.jpg" onmouseover="this.src='images/hover-home.jpg'" onmouseout="this.src='images/home.jpg'"/>
<a href="aboutus1.php" class="menu" target="content">
<img id="id_About" onclick="over('about')" src="images/aboutus.jpg" onmouseover="this.src='images/hover-aboutus.jpg'" onmouseout="if(me2=='about'){}else{this.src='images/aboutus.jpg'}" />
</a>
<a target="content" href="partners.php">
<img onclick="over('partners')" id="id_Partners" src="images/partners.jpg" onmouseover="this.src='images/hover-partners.jpg'" onmouseout="if(me2=='partners'){}else{this.src='images/partners.jpg'}" />
</a>
<a href="products1_1.php" target="content">
<img onclick="over('products')" id="id_Products" src="images/products.jpg" onmouseover="this.src='images/hover-products.jpg'" onmouseout=" if(me2=='products'){}else{this.src='images/products.jpg'}" />
</a>
<a href="contactus.php" target="content">
<img id="id_Contactus" onclick="over('contactus')" src="images/contactus.jpg" onmouseover="this.src='images/hover-contactus.jpg'" onmouseout=" if(me2=='contactus'){}else{this.src='images/contactus.jpg'}" class="contactus" />
</a>
</td>
</tr>
<tr>
<!--td colspan="2" class="bar"><img src="images/cti-upperbar.jpg" /></td-->
</tr>
</table>
</div>
<img src="images/cti-upperbar.jpg" />
</body>
</html>
UPDATED
I'd like to thank you all for all the efforts. :)
I did your suggestions and followed the Fiddle format but there's no image on menu showing :( Still stucked. :(
CODE:
<html>
<head>
<title>CTI | About us</title>
<script type="text/javascript" rel="javascript" src="jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/css">
.btn1{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn1{
background: url("images/home.jpg") no-repeat;
}
.btn1:hover{
background: url("images/hover-home.jpg") no-repeat;
}
.btn2{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn2{
background: url("images/aboutus.jpg") no-repeat;
}
.btn2:hover{
background: url("images/hover-aboutus.jpg") no-repeat;
}
.btn3{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn3{
background: url("images/partners.jpg") no-repeat;
}
.btn3:hover{
background: url("images/hover-partners.jpg") no-repeat;
}
.btn4{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn4{
background: url("images/products.jpg") no-repeat;
}
.btn4:hover{
background: url("images/hover-products.jpg") no-repeat;
}
.btn5{
width: 85px;
height: 58px;
padding-top: 58px;
float: left;
text-align:left;
}
.btn5{
background: url("images/contactus.jpg") no-repeat;
}
.btn5:hover {
background: url("images/hover-contactus.jpg") no-repeat;
}
.menu ul li:hover .btn {
background-position: -5px -120px;
}
.menu ul li{
list-style:none;
}
.menu
{
display: inline;
float: left;
}
a {
text-decoration:none;
color:#fff;
font-family:verdana;
font-size:12px;
}
.menu ul li ul{
display:none;
background:#17c0fa;
width:100px;
color:#fff;
}
.menu ul li:hover ul{
display:block;
padding:15px;
line-height:20px;
}
.menu ul li a:hover{
color:#fff;
}
.menu ul li:hover .btn {
background-position: -5px -120px;
}
</script>
<script type="text/javascript">
$(function(){
$('li').hover(function(){
$(this).find('ul').fadeIn();
},function(){
$(this).find('ul').fadeOut();
});
});
</script>
</head>
<body>
<div id="wrapper"-->
<table width="830px" border=0 cellspacing=0 cellpadding=0 >
<tr>
<td valign="top" align="left"><div style="width:85px;height:58px;"></div></td>
<td valign="bottom" align="right">
<div class="menu">
<ul>
<li href="welcome.php" class="btn1"><img src="images/home.jpg" onmouseover="images/hover-home.jpg" onmouseout="images.home.jpg" /></li>
<li class="btn2">
<ul>
<li>About CTI</li>
<li>Our Clients</li>
<li>Mission / Vision</li>
</ul>
</li>
<li href="partners.php" class="btn3"></li>
<li href="products.php" class="btn4"></li>
<li href="contactus.php" class="btn5"></li>
</ul>
</div>
</td>
<div class="clear"></div>
</tr>
</tr>
</table-->
</table>
</div>
<img src="images/cti-upperbar.jpg" />
</body>
</html>
I also removed the JS since css is easier than my recent js.
Going off of your fiddle (please stick with that method, not JavaScript!)
Remove the button and just add the class to you li. When you hover over the li, you can move into it's child elements and still be over the li but when you hover over the <div> and move into the <ul> you are no longer within the <div>.
Remove position:absolute and margin-top:90px from you sub-menu. Everything should work now.
<div class="menu">
<ul>
<li class="btn">HOVER
<ul>
<li>Menu Item</li>
<li>Menu Item</li>
</ul>
</li>
</ul>
</div>
.menu ul li ul{
display:none;
background:#78a802;
width:200px;
color:#fff;
padding-top:90px;
}
Working example: http://jsfiddle.net/y2BtT/89/
Maybe you can do something in the submenu with hover function
You mean like this: http://jsfiddle.net/yuhua/jJK2n/ ?
to solve your problem the only thing you will need to do is add another CSS rule. When you hover over the menu items to keep the changed image.
.menu ul li:hover .btn {
background-position: -5px -120px;
}
EXAMPLE
You can tell you to your friend that he lost cause everything is possible in Web Development the thing is how much time and effort you are willing to spend for it :D
Easiest Answer:
In your CSS just replace...
.btn:hover{
with
.menu li:hover .btn {
Demo of your example:http://jsfiddle.net/y2BtT/94/
For Inspiration Check out the demo i made: http://jsfiddle.net/techsin/FtPvf/1/
I have a logobar I'd like to have at the top of my website.
I want this to be a simple text with an image next to it.
I'm using the following code but the image displays underneath the text.
I am using a div which has both the text and image in a list which I've set to inline but they are not displaying in one line.
<doctype! html>
<html>
<head>
<title> Breaditt </title>
<style>
html, body {
font-family: sans-serif;
margin: 0;
padding: 0; }
#logobar {
background: rgb(206, 211, 255);
display: inline-block; }
#logobar ul {
list-style-type: none;
margin: 0; }
#logobar li {
display: inline; }
#logobar p {
font-size: 18;
font-family: Comic sans MS; }
</style>
</head>
<body>
<div id="logobar">
<ul>
<li><p> Breaditt </p></li>
<li><img src="img/logo.jpg" alt="breaditt cat" width="100" height="100"></li>
</ul>
</div>
</body>
</html>
You should remove the paragraph around your text. The paragraph is block element and it will break the line:
<div id="logobar">
<ul>
<li>Breaditt</li>
<li><img src="img/logo.jpg" alt="breaditt cat" width="100" height="100"></li>
</ul>
</div>
Another option is to inline the paragraph as well:
#logobar p {
font-size: 18;
font-family: Comic sans MS;
display: inline;
}
Change:
#logobar li {
display: inline;
}
to
#logobar li {
float: left;
}
jsFiddle example
No need to use list. Try:
<div id="logobar">
<p> Breaditt </p>
<img src="img/logo.jpg" alt="breaditt cat" width="100" height="100">
</div>
with CSS:
#logobar>* {
display: inline; }
Example
A bit new to styling sheets. I have a div for my site's content. I've aligned my h1 to be in the middle of that div by using the margin-right property. When I use the margin-right property on the p tag within the same div, however, it also affects the h1 and moves that further left. I figure I shouldn't be using margin-right, but what is the best way to do this?
Please let me know if my question is unclear.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="style1.css" />
<title>
Putnam County Family Support Services - Resources
</title>
</head>
<body>
<div id="container">
<div id ="top">
<center><img src="images/logo1.jpg" alt="logo" /></center>
</div>
<div id="navigation">
<ul>
<li><a href="index.html" onMouseOver="document.MyImage4.src='images/home_nav1.jpg';" onMouseOut="document.MyImage4.src='images/home_nav.jpg';">
<img src="images/home_nav.jpg" name="MyImage4"></a> </li>
<li><a href="services.html" onMouseOver="document.MyImage3.src='images/services_nav1.jpg';" onMouseOut="document.MyImage3.src='images/services_nav.jpg';">
<img src="images/services_nav.jpg" name="MyImage3"></a> </li>
<li><a href="resources.html" onMouseOver="document.MyImage2.src='images/resources_nav1.jpg';" onMouseOut="document.MyImage2.src='images/resources_nav.jpg';">
<img src="images/resources_nav.jpg" name="MyImage2"></a> </li>
<li><a href="staff.html" onMouseOver="document.MyImage1.src='images/staff_nav1.jpg';" onMouseOut="document.MyImage1.src='images/staff_nav.jpg';">
<img src="images/staff_nav.jpg" name="MyImage1"></a> </li>
<li><a href="contact.html" onMouseOver="document.MyImage.src='images/contact_nav1.jpg';" onMouseOut="document.MyImage.src='images/contact_nav.jpg';">
<img src="images/contact_nav.jpg" name="MyImage"></a> </li>
</ul>
</div>
<di id="content">
<h1>Contact</h1>
<p>Address: 22 West Washington Street<br />Greencastle, IN 46135</p>
<p>Phone number:</p>
</div>
<div id ="footer">
</div>
</div>
</body>
</html>
CSS:
body {
background: #f3f6f3;
text-align: center;
}
#container {
color: #1e337a;
width: 650px;
margin: 0 auto;
}
#top {
padding-bottom: 25px;
}
#navigation {
float:left;
position: absolute;
}
#navigation ul {
list-style: none;
padding-top: 20px;
}
#navigation ul li {
padding-bottom: 20px;
margin-right: 40px;
}
#content {
float: right;
border: 1px;
}
#content h1 {
margin-right: 175px;
}
#content p {
margin-right: 170px;
}
#footer {
clear: both;
font-size: 12px;
}
Try using percentages rather than absolute values to place items, to center an inline block element (if the element width is set) you can use : margin-right : auto; margin-left: auto;
To center your H1, you should use the property :
#content h1 {
text-align: center;
}
#content p {
text-align: left;
}
this centers your text, have a look here
It would be quite handy if I could have a look at your HTML as well.