I'm trying to create a clickable box that sizes and positions relative to how the browser sizes, but I get an extra box when I decrease the width of the browser and increase the length. I'm not sure what is going on and how to get rid of it.
Here are screen captures of what is going on:
- Browser at full size: http://i.imgur.com/mbyMOyw.png
- Browser stretched as described above: http://i.imgur.com/kuX1tdN.png
CSS:
img.banner {
width: 100%;
z-index: 0
}
#banner {
width: 100%;
margin-top: 0px;
margin-bottom: auto;
margin-left: 0px;
margin-right: auto;
position: relative
}
a.rollover {
display: block;
position: absolute;
top: 15%;
left: 15%;
width: 17%;
height: 8%;
background-color: black;
}
HTML:
<body>
<div id="banner">
<img src="image.png" class="banner"/>
<a href="banner1.png" class="rollover">
</div>
</body>
Also, any other suggestions to improve my CSS and HTML is appreciated, since I'm new to this.
Thanks.
Simple though it seems, by not closing the anchor tag the browser is generating two anchors - one inside the div, and one outside it. These layout on top of each other until the browser is resized: then their positions deviate a bit and they 'split'. Fix by closing the anchor:
<body>
<div id="banner">
<img src="image.png" class="banner"/>
<--added closing tag here
</div>
</body>
You can check out the fiddle here. Can't believe it took me so long!
Related
I am trying to add a on the left side of the screen. I can get the div to show up and work, but It does not allow any text to be next to it. please any help or tips would be great thanks. The I am having trouble with is "bannerL"
here is my html:
<html>
<head>
<title>Paid To Click</title>
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
</head>
<body>
<div id="bannerL">
<a href="">
<img src=""></a>
</div>
<div id="ebook">
<a href="">
<img src="">
</a>
</div>
</body>
</html>
here is my css:
body {
background-image: url("beach.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
p { color:#000000;line-height:2em;}
p.margin{
margin-top: 0px;
margin-bottom: 0px;
margin-right: 250px;
margin-left: 250px;
}
#banner {position:relative; margin:auto auto;}
#header{background-color: #fff; width: 1000px; position: relative; }
#bannerL {position: relative;
float:left;
}
#bannerR {
position: relative;
float: right;
}
#ebook {position: relative; margin: auto auto;}
It looks like you are doing your margins pretty wrong. If you want those paragraphs centered use text-align: center. This margin-left and margin-right: 250px is why your text (if it is in paragraphs) is being pushed away from anything else. But still, if that isn't your problem a negative margin will always fix your problem. You set your "text", whatever that is, to have margin-left: -100px (for example). One more thing - it is better to have only one element (the wrapped div) with a value fixed in pixels, and the others in %, so they resize according to this value. Then you can make the page resize according to one's resolution with media querys. But for now I suggest simply using this, as your whole page is messed up. Later you can think about making it look nice on all resolutions
margin-left: -100px;
I'll start by saying that I am very very new to web development as a whole and that this is my very first responsive site so please be gentle and bear this in mind, I am the definition of the word noob at this stage. Having searched for an answer for a while and having no luck I'm hoping that someone here could help me out.
I'm trying to make a homepage for this website. The design is simply a block down the left hand side of the page showing the logo at the top and then a series of links underneath, all of which is on the same background. To the right of this is one big image which fills the rest of the screen. I want the whole page to fill the browser window of whatever device it is viewed on so absolutely no scrolling is necessary, i.e. width and height both 100% of the viewport. The width of the page is giving me no grief at all, sweetly adjusting to different screen sizes as I want it, with the sidebar at 20% of the width and the main image at 80%.
The height is a different story however. I can't seem, in any combination of CSS I've tried so far, to be able to get the height to behave at 100% of the viewport. Either the sidebar is too short and the main image is too long or both are too long etc etc. The main image I want to keep the aspect ratio of and just have it overflow it's div as required to keep most of it displayed and the side bar I just want to fit to 100% of the page height. Here is my code at present:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html
{
height: 100%;
margin: 0;
padding: 0;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#page
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#sidebar
{
float: left;
width: 20%;
height: 100%;
padding-bottom: 10;
margin: 0;
background: url(/Images/bg.jpg);
}
#slideshow
{
float: right;
width: 80%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
#logoimg
{
width: 80%;
margin-top: 10%;
margin-left: 10%;
margin-right: 10%;
}
#mainimg
{
width: 100%;
overflow: hidden;
}
.link
{
font-family: courier;
font-size: 1.3em;
text-align: center;
padding-top: 7%;
padding-bottom: 1%;
color: rgba(255,255,255,1.00);
}
#font-face
{
font-family: courier;
src: url(/courier_new-webfont.ttf);
src: url(/courier_new-webfont.eot);
src: url(/courier_new-webfont.woff);
}
</style>
</head>
<body>
<div id="page"><!--Whole page container-->
<div id="sidebar"><!--Side bar container-->
<div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div>
<div class="link" id="homelink">Home<!--Home link--></div>
<div class="link" id="aboutlink">About<!--About link--></div>
<div class="link" id="gallerylink">Gallery<!--Gallery link--></div>
<div class="link" id="priceslink">Prices<!--Prices link--></div>
<div class="link" id="reviewslink">Reviews<!--Reviews link--></div>
<div class="link" id="contactlink">Contact<!--Contact link--></div>
<div class="link" id="clientslink">Clients<!--Clients link--></div>
</div>
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container-->
</div>
</div>
</body>
</html>
Any help with this would be really appreciated and don't hesitate to point out any massively amateur mistakes. I'm willing to take any criticism and learn from it. Thanks
Here’s just a simplified code example of the HTML:
<div id="welcome">
your content on screen 1
</div>
<div id="projects">
your content on screen 2
</div>
and here’s the CSS using vh:
div#welcome {
height: 100vh;
background: black;
}
div#projects {
height: 100vh;
background: yellow;
}
From Here: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
It works for me.
I have made you a basic set up to show how you would style this. The best way that I have found to set the height to 100%is with the use of jQuery/Javascript. You can find the height of the window and then input that into the css with the use of it.
The way this works is the var wH = $(window).height(); is finding the height and turning that into a number. Then when you use $('.sideBar').css({height: wH}); you are inputing the height into the css of sideBar.
jQuery
function windowH() {
var wH = $(window).height();
$('.sideBar, .mainImg').css({height: wH});
}
windowH();
This function I wrote is giving those two elements the height of the window. This will allow those two elements to be 100% of any browser's window.
I also recommend turning that nav into a ul which I included in the fiddle to show how that is possible.
JSFIDDLE (Remove 'show' at the end of the url to see code)
The next thing you will need to research is media queries to adjust the content to adapt better to mobile devices. Consider changing the sideBar to a horizontal nav when on mobile devices.
If you want a pure CSS only approach then you can do something like this,
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
By adding height&width to 100% in your html/body you can then use height: 100% on other elements to fill the entire page.
Refer to this JSFIDDLE to see how it works.
Helpful read about responsive web design
On Chrome, just adding display: flex on the body is enough.
On Firefox, you must add height: 100vh to get the desired result. And a margin: 0 will get rid of the annoying scroll bars.
<body style="display:flex; height: 100vh; margin: 0;">
<div style="background-color: red; flex:1;"></div>
<div style="background-color: green; flex:2;"></div>
<div style="background-color: blue; flex:1;"></div>
</body>
Sample code for exact Covering the page height.
HTML
<div class="container">
<div class="header">
<h1>Header</h1>
</div>
<div class="content">
Main content
</div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
max-width: 1020px;
margin: auto;
height: 100%;
background: #ddd;
padding:16px;
box-sizing:border-box
}
.header,.content{
background:#fff;
padding:16px
}
.content{
margin-top:16px;
min-height:calc(100% - 160px);
}
Example Link :
https://codepen.io/rahdirs/pen/jeRVod
I'm trying to make a specific clickable location on my image. The image size adjusts dynamically to the size of the browser, so I need the clickable box to do that as well. I have created a box to contain my image (not sure if that is necessary) and thought that if I made a box (a.resume) within that container, it would adjust relative to the image. However, the box seem to be creating outside of the container, off-screen to the right.
Below is the CSS:
#banner {
width: 100%;
margin-bottom: auto;
margin-top: auto;
margin-left: auto;
margin-right: auto;
}
img.banner {
max-width: 100%;
height: auto;
width: auto;
}
a.resume {
top: 20%;
left: 35px;
width: 60%;
height: 28%;
position: relative;
background-color: black; /* to see where my box is */
display:block;
}
Below is the HTML:
<body>
<div id="banner">
<img src="banner.png" class="banner" />
<a href="banner1.png" class="resume" />
</div>
</body>
Also, I would appreciate it if you can let me know if I can simplify anything in my CSS or HTML. I'm new to this and I might be over complicating them.
You'll need to use the HTML map tag. You can learn about it here
I have the following standard markup:
<body>
<header><div class="wrapper">Header</div></header>
<div id="create">create something</div>
<div class="wrapper">Content</div>
<footer><div class="wrapper">footer</div></footer>
</body>
and style:
.wrapper {
width: 920px;
margin: 0 auto;
padding: 0 20px;
text-align: left;
}
The thing I am having difficulty with is positioning the "create something" button, I would like it positioned as shown below...
The important points to note are that the button extends to the right into infinity, and it always takes up a width of "4 squares" of the centralised area, no matter what the browser width.
Any advice would be appreciated, thanks.
One element for the button and another element for the line that goes into the infinity and beyond..
The infinity element is partially hidden under #wrap or #header element's background.
http://jsfiddle.net/lollero/62wcV/1
CSS:
#wrap {
width: 400px;
margin: 0px auto;
background: #ffffff;
position: relative;
z-index: 10;
height: 600px;
}
#button,
#button_line {
position: absolute;
top: 40px;
right: 0px;
height: 20px;
background: #3a99ff;
}
#button {
width: 100px;
}
#button_line {
left: 50%;
z-index: 5;
}
HTML:
<div id="button_line"></div>
<div id="wrap">
<div id="button"></div>
</div>
I'm not going to say this is the best way, but it works for me.
<div style = "background:red;position:relative;left:50%;right:0">
<div style = "background:green;position:relative;left:120px;right:0">
Your button here!
</div>
</div>
The first div just gives you a reference to the centre of the page. The second is the 'button' where the left is offset by however much you want.
When creating buttons with CSS, always calculate the width, height, paddings and margin. it helps to give accurate box size to fit any particular container. check out this post. http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding Also check out their positioning tutorials.
alt text http://img190.imageshack.us/img190/7514/unbenanntax.jpg
This is what I want to do. A Div with some text in it and on the right bottom corner a img. The hight of the div is stable at 24px but the length is not known and there could be more than one of this divs In a row.
There are a couple of techniques of doing this. The simplest:
<div class="outer">
<img src="....">
</div>
with
div.outer { position: relative; height: 24px; }
div.outer img { position: absolute; right: 0; bottom: 0; }
Now that takes it out of the normal flow, which is a problem is you want other content to wrap/float around it. In that case you really need to know the height of the image and then apply appropriate tricks depending on what you've got.
Start with Making the absolute, relative.
If the image is 10 pixels high, for example, you could try this:
div.outer { height: 24px; }
div.outer { float: right; margin-top: 14px; }
Of course 14px comes from 24px - 10px. I don't know if that will satisfy what you're trying to achieve however.
Background image is your solution.
<div class="blarg" style="background:url(image.gif) bottom right no-repeat">Content</div>
You may need to adjust paddings of the div, too, so the contents of the div doesn't overlap your picture, if this is needed.
If you want to float the text around the image, both of those answers are wrong. Both will make the text go right over the image. I have been looking for hours and no real answer appears to exist. This article more clearly explains why both of those answer will not work if your attempting wrapping the text.
<div class='main'>
<div>...</div>
<div>...</div>
<div class="img-div">
<img src="....">
</div>
</div>
div.main {
height: 1164px;
width: 900px;
}
div.img-div {
position: absolute;
top: 1084px;
left: 817px;
margin: .75rem;
}
Assuming dimensions of the image are 57*55
Only for positioning an image at the bottom right corner:
I have "Div" and image in the div and small image in the bottom right corner of the div.
Detailed:
https://jsfiddle.net/ez08vL7w/
<html>
<head>
</head>
<body>
<div style=" position:relative; display: inline-block">
<img style="width: 100px; height: 100px; position: absolute; z-index: 4; bottom: 50px; right: 30px; "
src="http://images.unsplash.com/photo-1529736576495-1ed4a29ca7e1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"/>
<a href ="" target="_blank">
<img src="https://media.gettyimages.com/photos/tiger-portrait-picture-id949472768?s=612x612"/> </a>
</div>
</body>
</html>
Simplified:
<div style=" position:relative; display: inline-block">
<img style="width: 100px; height: 100px; position: absolute; z-index: 4; bottom: 50px; right: 30px; "
src=""/>
<img src=""/>
</div>