Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
for a school project I must make a webpage about my self, the web page is in Dutch, it is not completed, but I have done a lot an the webpage is almost done, the only problem is that when I minimize my page everything(text, photos, div, banners etc..) is going to be in another place and getting other measurements.
Could an expert watch and control/correct what I did wrong so I can finally end my site?
Or could you explain me why is it happening?
I will attach my site in a zip folder.
Here: http://www.filedropper.com/site_5
Thanks in advance.
PS: This is not my real site, but a copy. In the folder you will find photos, style sheets, and html-code all together.
use something like Normalise or Reset css, because it looks different on IE/webkit/FF
you need to use media queries (there are many good tutorials on the web), you don't need to use many of them, only basic breakpoints, so you arrange content that doesn't fit
you can't use margins to define main content area, that's why your margin-left/right 400px causes shrinking of content area. Use width 1120px for content (on FullHD screen, use media queries for smaller resolutions) and give it margin: 0 auto; - it will align it to center of body
when you're using resize effect on buttons, make sure you count with bigger value, so after resize the button will not move other elements (you can find tutorials for this too)
All I really see on the site is that when I make the window smaller the button moves too a different line.
You could wrap the page in a table;
<!DOCTYPE HTML>
<HTML>
<HEAD>
</HEAD>
<BODY>
<table width="80%" align="center">
<tr>
<div id="welkomachtergrond"></div>
</tr>
<tr>
<div id="welkomtext" align="center">
WELKOM
</div>
</tr>
<tr>
<div id="welkomtext2">
<center>BY</center>
<p><center>Federico xxx</center></p>
</div>
</tr>
<tr colspan="4">
<td><a ID="GhostButton" href="OverMij.html">Overmij</a></td>
<td><a ID="GhostButton1" href="Foto.html">Foto's</a></td>
<td><a ID="GhostButton2" href="Video.html">Video's</a></td>
<td><a ID="GhostButton3" href="Contact.html">Contact</a></td>
</tr>
</BODY>
</HTML>
Related
Sorry for the oddly specific never-use-in-real-life question, but I'm stumped for a school assignment.
We were tasked with replicating a web page from scratch using HTML only (no CSS), and while the replicating part was easy, one of the optional components is making the web page static, so that it does not automatically resize upon changing the browser width.
I've ran across numerous solutions to this issue while searching the site but none of them have worked; either they used CSS or just didn't seem to catch (the etc element). If anyone has any insight into this, please let me know. It's not essential to my grade, but its driving me insane.
You can use a width attribute, in case you don't care about what version of html you need to use. For example, you can create a container from a table:
<table width="1000">
<tr>
<td>
<!-- this will have a width of 1000 pixels -->
</td>
</tr>
</table>
https://www.w3.org/TR/html401/struct/tables.html#adef-width-TABLE
In html5 the width attribute on the table element is obsolete
So I kinda reaching the end of what 'blind flailing' can accomplish and am hoping someone can point me in the right direction here. I am only starting to absorb the whole HTML/CSS way of doing things so still pretty new at this.
So the problem I am trying to solve is one of keeping everything visible on screen. The page exists mostly for navigating a series of charts produced by matplotlib as SVGs, but is otherwise all static content.
The page is of the basic form:
<html>
<body>
<div name=someFrameName>
<h2>Some Section</h2>
<iframe src="some_html_with_controls_and_data_2.html">
<html>
<body>
<table>
<tr>
<td><a href=some_html_with_controls_and_data_1.html>Data Set 1!</a></td>
<td>Data Set 2!</td>
<td><a href=some_html_with_controls_and_data_3.html>Data Set 3!</a></td>
</tr>
<tr>
<td colspan=3 rowspan=3>
<img src=data_set_2.svg/>
</td>
</tr>
</table>
</body>
</html>
</iframe>
</div>
</body>
</html>
There is also some very basic CSS involved, mostly 'width:100%;height:100%;' and 'table-layout:fixed;', but this is intended to be a rather utilitarian output so there is not much there.
For the most part this works fine, but I run into issues with the content inside the being longer than what is displayed. This results in some sections starting before previous ones have finished (so the bottom is cut off) or content continuing below the maximum scroll of the full page. Often, at minimum, the border for any given table will overlap the text of the next header.
So I am hoping someone can suggest a way to tell the browser 'yes, scale everything inside this div so it displays'. I have looked a number of similar threads but they all seem to be either much more complicated situations or specifically involve the problem of long text being cut off.
One restriction I should note is that the page can not use any resources external to the site (internet connection can not be assumed) nor can it utilize most java-script libraries due to license issues. So a lot of the standard convenience libraries are not available in this case.
Thanks!
I've got a problem with div spacing in responsive design if you go to this url: http://www.false-idolz.com/mobile.html you'll se how when you decrease to the maximum de window width the div spacing gets bigger instead of smaller... why does it happen? how do i fix it? Thanks!
<table>
<div>
<tr>
<td>
......texto.........
</td>
</tr>
</div>
<div>
<tr>
<td>
......texto.........
</td>
</tr>
</div>
</table>
This is the example of the code I am using everything works but spacing
Transferred from comments as this proved to be the answer
Inspecting the source code reveals that you have got tables within tables - not only is this bad practice, but it will also cause many problems and I suspect that this is one of them. Honestly, I think there is far too much for us to change in order to get your code working as intended. Please redesign your layout, without using tables within tables, then we if you still have difficulty come back to us.
I am trying to display a couple of iframes such that both of them take up the width of the screen, but the first iframe on the left is only wide enough to display all its contents. I have seen several solutions that use javascript, but I'm not understanding why this is necessary and I would really like to accomplish it using only CSS3.
I have been reading some of the CSS3 spec ( http://www.w3.org/TR/css3-box/#Calculating ) and although it is a bit difficult to understand, it seems like it should be using "shrink to fit" if I specify an auto width. However, it does not do this. For instance, in the code below, frame1.html contains the same contents as the first td in the second table, and frame2.html contains the same contents as the second td in the second table:
<!doctype html>
<html>
<head>
<title>Frame Test</title>
</head>
<body>
<table>
<tr>
<td><iframe src="frame1.html"></iframe></td>
<td><iframe src="frame2.html"></iframe></td>
</tr>
</table>
<table>
<tr>
<td>Hello</td>
<td>Goodbye ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</td>
</tr>
</table>
</body>
</html>
However, there is a bunch of extra space in the left iframe. Why? My best guess is that either somehow the iframe is inserting extra space in the outer tags (e.g. the html or body tags), which seems unlikely because firebug says most of the space is in the actual text, or else the auto width calculation is somehow different from iframe than it is for td. (A clear, easy to understand explanation of the algorithm involved would be nice!) I have tried various settings for width and height propogating all the way up to the html tag, but I can't seem to get anything to work.
Why isn't it shrinking to fit, so it only uses the space actually taken up by its elements?
I imagine it's because an iframe doesn't actually contain its "contents" in an HTML/CSS sense.
It's easy to style things on the actual DOM, and that's what CSS is for. But an iframe is a window to a completely different DOM, independent of the parent. The parent page has no knowledge of the "contents" of the iframe and therefore can't style the dimensions of the iframe to match those contents.
As many, many people will suggest... You should really try to avoid frames. In my experience they're more trouble than they're worth. It's considerably easier to maintain the styles and behaviors within a single DOM.
I've created a map system for a game that runs on the principle of drawing the picture of the map from tiles. There are many reasons for this which I won't go into here but if you really want to know then I'm sure you can find out how to contact me ;)
I have made the latest version live so you can see exactly where the problem lies and the source. The issue is the line between the top 2 tiles and the bottom 2 tiles, I can't figure out why it's gone like this and any help would be appreciated.
In the source is a marker called "stackoverflow", if you search for "stackoverflow" when viewing source then it should take you to the table in question.
I have also uploaded an image of the issue.
I think you need to use display: block on your images. When images are inline there's a little extra space for the line spacing.
You could also adjust the line height of the td element:
td {
line-height: 0
}
I know this might sound bad, but you need to ensure there is no whitespace between then end of you <img> tag and the start of the end </td> tag.
i.e. The following will present the problem:
<td>
<img src="image.jpg"/>
</td>
And this will not:
<td><img src="image.jpg"/></td>
Hope that helps.
Edit: OK, that wasn't the solution at all. doh!
I haven't looked up the whole thing, but the problem lies somewhere in the style sheets.
If you copy out only the table part of it, it is displaying the map correctly.
If you remove the final </span> tag from this part, it is also working (however the page gets mixed):
<div class="inner"><span class="corners-top"><span></span></span>
<div class="content" style="font-size: 1.1em;">
<!-- Stackoverflow findy thingy -->
<table border="0" cellspacing="0" cellpadding="0">
So either try from the beginning with the css or try to remove one-by-one them, to see, which is causing the problem.