Hi I am working on making a website. The problem is the dimensions of the website change on the computer. The computer screens are different sizes, and some are different browsers. For instance the navigation bar will change width, and it will also overlap on some computers. It also will outline images on one computer, and it is using Internet Explorer, but on another computer that is running Chrome (And Different Screen Size) the images are not outlined. I do not know why this is, please help!
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>
Drippr
</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 id="title">Drippr</h1>
<div id="navbar">
<a href="http://drippr.me/" class="boxtext">
<div id="box1">
<p> Dripps </p>
<img src="http://drippr.me/images/paper.svg" style="height: 40px">
</div>
</a>
<a href="http://drippr.me/" class="boxtext">
<div id="box2">
<p> Bucket </p>
<img src="http://drippr.me/images/bucket.svg" style="height: 40px">
</div>
</a>
<a href="http://drippr.me/" class="boxtext">
<div id="box3">
<p> Settings </p>
<img src="http://drippr.me/images/settings.svg" style="height: 40px">
</div>
</a>
</div>
<div id="hometop">
<ul id="hometoplist">
<li>TEST</li>
</ul>
</div>
<table>
<tr>
<td>
<div class="bubbles">
</div>
</td>
<td>
<div class="bubbles">
</div>
</td>
</tr>
</table>
<div id="footer">
</div>
</body>
</html>
My CSS:
#title {
color: #1c63ff;
text-align: center;
font-size: 35px;
position: absolute;
margin: auto;
border: 1px solid white;
margin-left: 45%;
width: 120px;
height: 45px;
background-color: white;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
#navbar {
height: 100%;
width: 10%;
background-color: #D1ECFF;
border-radius: 0;
position: fixed;
margin-left: -10;
top: -1;
border: 2px solid #A1C6FF;
}
.boxtext {
color: darkblue;
font-weight: bold;
text-align: center;
margin: auto;
text-decoration: none;
font-size: 22px;
}
.boxtext:hover {
color: darkblue;
font-weight: bold;
font-size: 25px;
}
#box1 {
height: 18%;
width: 90%;
background-color: #5CBDFF;
border: 2px solid #3385FF;
border-radius: 8px;
text-align: center;
margin: auto;
top: 5px;
margin-left: 6.5px;
position: absolute;
}
#box1:hover {
background-color: #79AEFF
}
#box2 {
height: 18%;
width: 90%;
background-color: #5CBDFF;
border: 2px solid #3385FF;
border-radius: 8px;
text-align: center;
margin: auto;
top: 145px;
margin-left: 6.5px;
position: absolute;
}
#box2:hover {
background-color: #79AEFF
}
#box3 {
height: 18%;
width: 90%;
background-color: #5CBDFF;
border: 2px solid #3385FF;
border-radius: 8px;
text-align: center;
margin: auto;
top: 285px;
margin-left: 6.5px;
position: absolute;
}
#box3:hover {
background-color: #79AEFF
}
#hometop {
height: 50%;
width: 100%;
background-color: #D7D7D7;
border-bottom: 2px solid gray;
border-bottom-right-radius: 12px;
border-top-right-radius: 12px;
}
.bubbles {
height: 200px;
width: 200px;
border-radius: 100px;
background-color: #99C2FF;
border: 2px solid #1975FF;
margin: auto;
margin-top: 20px;
margin-left: 160px;
}
#hometoplist {
text-align: right;
margin: auto;
margin-top: px;
}
#footer {
}
I believe your navigation bar issue is due to different screen resolutions on different displays. Since the smallest width for the majority of users is >= 1024 px, try setting a width of 1024 px for your site's <body> or a div wrapper around everything in the body of the site.
Also, I recall IE has images bordered by default...try adding to your css:
img {
border:0;
outline:none;
}
Related
I have been trying to learn HTMl and CSS for a while, I already know some of the basics, but for a long time I have been struggling with positioning items where I want them.
I have followed many tutorial, and if I follow it exactly hoy they do it everything works perfect, but when I start playing with things around to make it a bit more complex, things don't behave the way that I expect to.
Check at this image for example. I have rows with elements, the first one I was able to cover 50% percent of the screen with each item and align them in the middle with a float, but when I change the width to 40% instead 50%, they loose the center alignment and what is even more strange to me is that they move down a few pixels and loose the separation with the item bellow.
I don't understand why changing the width affects its vertical position.
With the elements of the second row, that im positioning them as absolute, I can't figure out how to center them in the middle of the screen.
Ande the forth row, the beige and green boxes, I don't understand why the text on the beige box is on the bottom of the box and part of it is out of the box, while the text in all the other rows aligned vertical to the center of the box automatically.
Here is my code:
body {
margin: auto;
max-width: 4000px;
height: 5000px;
font-family: "Lato";
}
#text-1{
background-color: black;
color: white;
width: 50%;
padding: 20px, 50px;
float: left;
text-align: center;
text-justify: auto;
}
#text-1:hover{
background-color: white;
color: black;
}
#text-2 {
background-color: lightgray;
color: black;
width: 50%;
padding: 20px, 50px;
float: left;
text-align: center;
text-justify: auto;
}
#text-2:hover {
background-color: white;
color: black;
}
#text-3{
background-color: black;
color: white;
width: 500px;
padding: 0px, 50px;
position: absolute;
left:200px;
top: 100px;
text-align: center;
}
#text-3:hover{
background-color: white;
color: black;
}
#text-4 {
background-color: lightgray;
color: black;
width: 500px;
padding: 0px, 50px;
position: absolute;
left: 700px;
top: 100px;
text-align: center;
}
#text-4:hover {
background-color: white;
color: black;
}
#text-5 {
background-color: lightpink;
color: black;
width: 100%;
padding: 0px, 50px;
position: fixed;
top: 200px;
text-align: center;
}
#text-5:hover {
background-color: white;
color: black;
}
a:link{
text-decoration: none;
color: inherit;
}
a:visited{
text-decoration: none;
color: inherit;
}
.box-1 {
background-color: beige;
color: black;
width: 500px;
height: 100px;
position: relative;
left: 100px;
top:300px;
text-align: center;
border-style: solid;
border-width: 1px;
padding-left: 20px;
padding-right: 20px;
z-index: 1;
}
.box-2 {
background-color: lightgreen;
color: black;
width: 200px;
height: 100px;
position: relative;
left: 300px;
top: 250px;
padding: 20px, 20px,20px, 20px;
text-align: center;
border-style: solid;
border-width: 1px;
z-index: 0;
}
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
<div id="text-1">
<a href="index.html" target="_blank">
<p>Experimenting with one paragraph</p>
<p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
</a>
</div>
<div id="text-2">
<a href="index.html" target="_blank">
<p>Another chunck of text</p>
<p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
</a>
</div>
<div id="text-3">
<a href="index.html" target="_blank">
<p>Button 3</p>
<p>This button has an absolute posittion, so it doesn't float around.</p>
</a>
</div>
<div id="text-4">
<a href="index.html" target="_blank">
<p>Button 4</p>
<p>This button has an absolute posittion, so it doesn't float around.</p>
</a>
</div>
<div id="text-5">
<a href="index.html" target="_blank">
<p>Button 4</p>
<p>This button has a fixed posittion, so it wont move when scrolling up or down</p>
</a>
</div>
<div class="box-1">
<p>This box is poitioned in front of others by using a z-index higher than the box bellow.</p>
</div>
<div class="box-2"></div>
</body>
</html>
Do you want like this?
body {
margin: auto;
max-width: 4000px;
height: 5000px;
font-family: "Lato";
}
#text-1{
background-color: black;
color: white;
width: 50%;
padding: 20px, 50px;
float: left;
text-align: center;
text-justify: auto;
position: relative;
}
#text-1:hover{
background-color: white;
color: black;
}
#text-2 {
background-color: lightgray;
color: black;
width: 50%;
padding: 20px, 50px;
float: left;
text-align: center;
text-justify: auto;
position: relative;
}
#text-2:hover {
background-color: white;
color: black;
}
#text-3{
background-color: black;
color: white;
width: 40%;
padding: 0px, 50px;
position: absolute;
left:10%;
top: 110px;
text-align: center;
}
#text-3:hover{
background-color: white;
color: black;
}
#text-4 {
background-color: lightgray;
color: black;
width: 40%;
padding: 0px, 50px;
position: absolute;
left: 50%;
top: 110px;
text-align: center;
}
#text-4:hover {
background-color: white;
color: black;
}
#text-5 {
background-color: lightpink;
color: black;
width: 100%;
padding: 0px, 50px;
position: fixed;
top: 200px;
text-align: center;
}
#text-5:hover {
background-color: white;
color: black;
}
a:link{
text-decoration: none;
color: inherit;
}
a:visited{
text-decoration: none;
color: inherit;
}
.box-1 {
background-color: beige;
color: black;
width: 500px;
height: 100px;
position: relative;
left: 100px;
top:300px;
text-align: center;
border-style: solid;
border-width: 1px;
padding-left: 20px;
padding-right: 20px;
z-index: 1;
margin: 0;
}
.box-2 {
background-color: lightgreen;
color: black;
width: 200px;
height: 100px;
position: relative;
left: 300px;
top: 250px;
padding: 20px, 20px,20px, 20px;
text-align: center;
border-style: solid;
border-width: 1px;
z-index: 0;
}
.box-1 > p{
position: absolute;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
<div id="text-1">
<a href="index.html" target="_blank">
<p>Experimenting with one paragraph</p>
<p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
</a>
</div>
<div id="text-2">
<a href="index.html" target="_blank">
<p>Another chunck of text</p>
<p>This button is . positioned with a float, so it will stick eother to the lef or right of the screen</p>
</a>
</div>
<div id="text-3">
<a href="index.html" target="_blank">
<p>Button 3</p>
<p>This button has an absolute posittion, so it doesn't float around.</p>
</a>
</div>
<div id="text-4">
<a href="index.html" target="_blank">
<p>Button 4</p>
<p>This button has an absolute posittion, so it doesn't float around.</p>
</a>
</div>
<div id="text-5">
<a href="index.html" target="_blank">
<p>Button 4</p>
<p>This button has a fixed posittion, so it wont move when scrolling up or down</p>
</a>
</div>
<div class="box-1">
<p>This box is poitioned in front of others by using a z-index higher than the box bellow.</p>
</div>
<div class="box-2"></div>
</html>
</body>
</html>
In the 2nd row divs are aligned at the center by specifying width of #text-4 and #text-5 to 40% , left of #text-4 to 10% and left of #text-5 to 50%.
P tag inside #box-1 is aligned inside #box-1 by setting it's position absolute
this is something I built:
https://i.imagesup.co/images2/e51854cad0f72ef2900debd5518472d71713cc71.png
There is no overflow because I put in body tag overflow-x:hidden, and it's kind of "nasty" way.
I tried to set div container as width:100vw,max-width:100vw; but it's still not helping. tried to do it with a negative margin and every possible way I know but it's still create overflow like this:
https://i.imagesup.co/images2/794cf0f60d80b8a2de4f5ac44d93579bd50ace2d.png
This the relevant code of the light blue part, thanks in advance:
<body>
<div id="divStyle1">
<header>
<h1>
<span>How to <span class="importantH1">ripen Avocado</span> quickly ?</span>
<span><span class="importantH1">RFP bags</span> ripen Avocado within <span class="importantH1">12-24 hours !</span></span>
</h1>
</header>
<main>
<div id="purpuleLineBox">
<div id="purpuleLine1"> <p>100% recyclable and bio-degradable</p> </div>
<div id="purpuleLine2"> <p>Simulates the natural ripening process, organic</p> </div>
<div id="purpuleLine3"> <p>The quickest way to achieve the perfect avocado taste</p> </div>
<div id="purpuleLine4"> <p>Work with Mango, Banana, Peach, and another climacteric fruits</p> </div>
<div id="purpuleLine5"> <p>The user interface on the bag shows when an avocado is fully ripen</p> </div>
</div>
<img id="logoImg" src="Logo.png" alt="">
</main>
</div>
</body>
body {
margin: 0 auto;
}
html {
scroll-behavior: smooth;
}
#divStyle1 {
height: 90vh;
background-color: #016087;
}
h1>span {
display: block;
}
h1 {
color: white;
text-shadow: 2px 2px black;
font-size: 45px;
margin: 0 auto;
}
.importantH1 {
border-bottom: 10px solid #D52C82;
font-size: 53px;
}
.importantH1:hover {
border-bottom: 15px solid #D52C82;
font-size: 55px;
transition-duration: 0.5s;
}
#logoImg {
position: absolute;
right: -20px;
top: 10vh;
transform: rotate(8deg);
border: 20px dashed white;
padding-left: 20px;
padding-bottom: 20px;
padding-bottom: 20px;
}
#purpuleLineBox {
margin-top: 100px;
}
#purpuleLine1 {
background-color: #D52C82;
height: 50px;
width: 34%;
margin-bottom: 30px;
}
#purpuleLine2 {
background-color: #D52C82;
height: 50px;
width: 44%;
margin-bottom: 30px;
}
#purpuleLine3 {
background-color: #D52C82;
height: 50px;
width: 52%;
margin-bottom: 30px;
}
#purpuleLine4 {
background-color: #D52C82;
height: 50px;
width: 58%;
margin-bottom: 30px;
}
#purpuleLine5 {
background-color: #D52C82;
height: 50px;
width: 60%;
margin-bottom: 30px;
}
div>p {
font-size: 30px;
color: white;
text-shadow: 2px 2px black;
font-weight: bold;
margin-top: 0px;
}
This is happening due to a combination of using absolutely positioned right: -20px; and transform: rotate(8deg); if you remove the transform and set right to 0 it should not have the blank space.
If you want to keep these styles just use overflow-x: hidden;
I have a very simple html web page on which I display two buttons whose contents are pictures of text. The buttons have a white background and gold outline. However, they now have a black bar that protrudes from the right side of each button.
The only way I have found to be able to move them is running
<button class="button button2" style="vertical-align:middle"><a href=""><img class="chatbutton" src="img/chatbutton.png" />
where the vertical-align attribute changed if the bar is on the bottom right corner of the button or in the middle of it.
My code is:
.button {
border-radius: 12px;
background: white;
border: 4px solid #FFD500;
text-align: center;
padding: 20px;
margin: auto;
overflow: hidden;
}
.button:hover {
background: #FFD500;
outline: medium none;
}
.button1 {
width: 150px;
height: 75px;
}
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.main {
background-color: white;
background: white;
width: 95%;
margin: 0 auto;
text-align: center;
margin-top: 20px;
padding-top: 40px;
padding-bottom: 20px;
border: 2px solid #494A4A;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
}
#media screen and (min-width: 480px){
.main {
background-color: white;
width: 50%;
margin: 0 auto;
text-align: center;
margin-top: 20px;
padding-top: 40px;
padding-bottom: 20px;
border: 2px solid #494A4A;
border-radius: 25px;
margin-left: auto;
margin-right: auto;
}
}
<body style="background-color:#494A4A">
<div class="outer">
<div class="middle">
<div class="main">
<button class="button button1" ><a href=""><img
class="filebutton" src="" /></button>
</div>
</div>
</div>
</body>
img { border-radius: 60px; box-shadow: 1px 1px 1px rgba(0,0,0,0.5); width: 284px; height: 108px; object-fit: none; object-position: 50% 20%; } // object position can be adjusted to fit your liking
<body>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsuLEXVtGfxNCEOgIKdeIT4ki9LK3JwiGAs0YtuAXJHay8WZhw">
</body>
I would actually make the image a button itself, rather then using a button tag. But you can also use the button tag and style it.
I am making website in html and css and I have a problem. In my css file I made id "full" which set wooden background after sidebar and it should continue on all page. In my class "picture" I made 80% width white panel - so there should be 80% white background in the middle and 10% edges should be wooden. It works correctly untill my article section, where I added some images of pizzeria. Immediately there is no wooden edges, only white. I don´t understand because my "full" id and "picture" class continue untill end of the body. Could somebody see where is error please?
Image showing error
* {
padding: 0;
margin: 0;
border: 0;
}
.container {
margin: auto;
overflow: hidden;
width: 100%;
}
#full {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
.picture {
margin: auto;
width: 80%;
background: white;
}
#pizzaObrazok {
background-image: url("img/pizzaCompleted.png");
width: 100%;
height: 210px;
margin: 0px;
}
nav {
float: left;
margin-left: 2px;
width: 100%;
height: 32px;
}
ul {
float: left
}
li {
display: inline;
border: 4px solid black;
font-size: 24px;
padding: 10px 64px;
background-color: #990000;
color: #ffffff;
}
li a {
color: #ffffff;
text-decoration: none;
padding-top: 8px;
padding-bottom: 5px;
vertical-align: middle;
}
#imgPizza {
width: 59%;
height: 270px;
padding-left: 190px;
padding-top: 30px;
padding-bottom: 30px;
}
article p {
font-size: 120%;
font-family: fantasy;
text-align: center;
margin-right: 160px;
}
#imgPizza2 {
width: 30%;
height: 270px;
position: absolute;
transform: rotate(345deg);
margin-top: 100px;
margin-left: 50px;
border: 6px solid red;
}
#imgPizza3 {
width: 30%;
height: 270px;
position: absolute;
margin-left: 390px;
margin-top: 100px;
transform: rotate(15deg);
border: 6px solid red;
}
#phone {
border: 2px solid black;
margin-top: 150px;
margin-right: 180px;
padding: 5px;
position: absolute;
display: inline;
text-align: center;
background: #ff4d4d;
}
<header>
<div id="pizzaObrazok">
</div>
</header>
<div id="full">
<section id="navigation">
<div class="container">
<nav>
<ul>
<li>ÚVOD</li>
<li>FOTO</li>
<li>JEDÁLNY LÍSTOK</li>
<li>KDE NÁS NÁJDETE</li>
<li>NÁZORY</li>
</ul>
</nav>
</div>
 
</section>
<div class="picture">
<img id="imgPizza" src="img/pizzacheese.jpg">
<aside id="phone">
<h2>Telefónne číslo:</h2>
<h2> 0905 741 963</h2>
</aside>
</div>
 
<div class="picture">
<article>
<p>U nás dostanete najchutnejšiu pizzu z výlučne kvalitných surovín</p>
<img id="imgPizza2" src="https://cdn.vox-cdn.com/uploads/chorus_image/image/50289897/pizzeria_otto.0.0.jpg">
<img id="imgPizza3" src="https://media-cdn.tripadvisor.com/media/photo-s/09/bc/74/79/pizzeria-du-drugstore.jpg">
</article>
</div>
</div>
You have your elements "#imgPizza2" and "#imgPizza3" whit position absolute outside your "#full" wrapper. You can do various things to achive the effect you are looking for but depends of many others things.
I think the simpliest way is to put your background image in to the body and not in the warpper "#full" or change the postion of your images among others.
body {
background-image: url("http://newallpaper.com/wp-content/uploads/2014/01/Dark-Wood-620x387.jpg");
}
It looks like the wood background is 620 x 387, so my first thought is that it is big enough to cover the first section but not the articles. Maybe add background-repeat: repeat-y; to your #full class and see if the wood border spreads further down the page.
I am trying to place a vote counter inside a div called drop-section. I have managed to create the desired effect, which works perfectly in all cases except when I place the thing inside drop-section. When I do that, the arrows are no longer up against the top and bottom of the container. I can't figure out why the up and down arrows would move like that if they have absolute positioning. I've looked at the drop-section css and can't see any reason why it should be doing that.
Here is the html:
<html>
<body>
<div id="wrapper">
<div id="drop-section">
<div id="menu">
<a class="item" href="drop_index.php">Dead Drop</a>
<a class="item" href="add_topic.php">New Post</a>
<a class="item" href="admin/add_cat.php">New Category</a>
<div id="userbar">Hello, dude.</div>
</div> <!--menu-end-->
<!--vote-box-container up and down elements lose
abs position when vote-box-container is
inside drop section-->
</div> <!--drop-section-end-->
<!--vote-box-container works perfectly here outside the drop section-->
<div id="vote-box-container">
<div id = "vote-box">
<div class="up">
<img src="img/up.png">
</div>
<div class="down">
<img src="img/down.png">
</div>
<div id = "votes">0</div>
</div> <!--vote-box-end-->
</div> <!--vote-box-container-end-->
</div> <!--wrapper-end-->
</body>
</html>
Here is the CSS file:
#wrapper {
width: auto;
}
#menu {
clear: both;
width:88%;
margin: 0 auto;
height:20px;
background: none;
text-align: left;
font-size: .9em;
padding-bottom: 2%;
}
#menu a:hover {
background: #930c0c;
padding: 7px;
color: #fff;
}
.item {
color: #fff;
background-color: #000;
font-family: 'Play', sans-serif;
margin: 7px;
padding: 7px;
text-decoration: none;
}
#userbar {
float: right;
}
#drop-section {
background-image: url(../img/wrapper-bg.png);
background-repeat: repeat-x repeat-y;
border-style: solid;
border-width: 2px;
border-color: #222;
box-shadow: 10px 10px 5px #000;
width: auto;
line-height: 40px;
padding: 10px 25px;
margin-bottom: 1%;
font-family: sans-serif;
overflow: auto;
}
#vote-box-container {
height: 80px;
width: 50px;
float: left;
background: #000;
margin-left: 5px;
position: relative;
}
#vote-box {
height: 80px;
width: 30px;
position: absolute;
left: 10px;
display: table;
padding: 0;
}
#votes {
color: white;
display: table-cell;
vertical-align: middle;
font-weight: bold;
text-align: center;
}
.up {
position: absolute;
top: 0px;
}
.down {
position: absolute;
bottom: 0px;
}
The line-height in your #drop-section css is adding space above and below the arrow images. Try adding line-height:0 to the image containers .up and .down within #drop-section