|
HTML - Adding A White Space Between The Foreground/background
I'm editing a tumblr, with complete custom HTML, and I was wondering how I'd either add one fixed white rectangle going down the page vertically (the posts are centered on the page, but the page background is too distracting from the posts themselves). Or, how I would just add white borders around each individual post?
This should explain the look I want (with different colors/ background/ etc) Similar TutorialsHi all, I am trying to create a webpage, which would have a world map as the background (I am imagining an SVG file could do it) and in the foregroung there would be multiple textboxes, that would be fillable by the user. The values from the textboxes would be stored on the server, but that is the second step (for which I dont bother right now), most likely done through some PHP. The webpage should be a re-creation of a gameboard - namely Twilight Struggle. For an example (taken out of an Excel file calculator for this game) please see this: Could someone point me in a direction, which I could take in the general design part? E.g. SVG+textarea or something completely different? can someone outline the steps to making a page with a fixed background and a scrolling foreground such as can be found here? http://www.paul-wallas.co.uk/ i've looked at the code and what information i've found on the web but i don't see how it is done. tia, Okay. I am sick of searching on google and w3c.org for solutions. I am asking anyone who is a pro at web developing to help me out! Problem I am using loadVars in Flash, from a *.html file. Mainly because the server does not support PHP and because in HTML I can have comments. I am spacing out the text like so, for readability: &variable1=value1 &variable2=value2 &variable3=value3 etc. when I do the line breaks, the HTML page automatically encodes whitespaces. I need an HTML tag or possibly CSS or Javascript that will get rid of all the whitespaces. Or if it is possible, as I was looking on w3c.org, there might be a text/content type or url-encode type that will do this, but haven't found one. If anyone has any ideas, I need them. Again, I am trying to remove all the whitespace in the ENTIRE page. Is there a way to have 2 lines of text (one above the other) where each line is a different colour, but there's no break between the lines? I would prefer an answer that uses CSS. I'm new to html, just got some basic knowledge, but I've made these 2 calenders, one on one page andone on another but otherwise identical. The thing is, no matter how much I double check for slight differences in the html code, the calender on one page has huge spaces between every three months. See for yourselves: http://www.belekgolftravel.com/servi...eType=Services Working one http://www.belekgolftravel.com/advert_detail.php?ID=54 Buggered up one Any ideas help please! I have an image above a table and I want the image to be physically touching the table border, however there are about 5 pixels of white space above the table. I can't figure out how to remove them. Here's the code. Any help would be greatly appreciated. <img src=logo.jpg> <table border=1 bordercolor="#3C5581" cellspacing=0 cellpadding=0 width=740> Guys, hello to everyone in this forum. this my first thread rising a question. please clear my doubt. when im adding the <form> or </form> tags in the code it leaves a empty line (ie) an white space. this occurs only in IE, not in firefox. im using the Doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> So guys plz give me a solution to remove the empty line.. -makkal I have white space around my images with the grey border. I put in a picture that was larger than the previous cell size than removed it (the width and height code as well) but it still leaving the white space around the left and right sides of the images. http://www.diversink.com/publications.htm this is the page i'm working on Any ideas to why this is happening would be greatly appreciated Thank you, Rainseed Hi All! I have a question about the (white) space above any text. I don't know if its possible or not but i hope yes... Please look at the attached picture. You can see the space between the text and the black border on the top... I tried padding, margin set to zero but nothing worked! Maybe its not possible to remove it? Thanks in advance! In IE 7, some of my pages are displaying white space at the top of the page. Some pages show more than others... I cannot seem to figure out why. Two examples: http://labsysgrp.com/contact_us.php http://labsysgrp.com/newsletters_archived.htm Anyone have any thoughts? Thanks! Hello everyone, So here is my page... http://www.mytodostuff.com you will notice between the header and the navigation menu, there is a small white space that goes across the whole page... how do i delete that white space so the bottom of the header (the blue box) touches the top of the navigation(the orange and white colors)? any assistance on showing me how to do this would be greatly appriciated Thanks everyone for taking the time to read this thread and thanks even more to those that respond. I don't understand why there is white space at the bottom of the page. I am using negatives which one would assume would take away space and not add it. Below is the HTML and CSS codes. If someone could take a look at this and let me know what it is that I need to do to get rid of the white space at the bottom, I would be greatly appreciative. Thanks in advance. McClain HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blakeslee - Quality Commercial Dishwashing and Prep Equipment</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content">
<ul>
<li class="premiere"><a href="#"><img src="images/p1.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Flight-Type Dishwashers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="primary"><a href="#"><img src="images/Rack_type_dishwasher.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Rack-Type Dishwashers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="endProduct"><a href="#"><img src="images/vegetable_peelers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Vegetable Peelers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="primary"><a href="#"><img src="images/door_type_dishwashers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Door-Type Dishwashers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="endProduct"><a href="#"><img src="images/food_slicers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Food Slicers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
</ul>
<img id="productBg1" src="images/first_row_background.png" />
<div id="clear"></div>
<ul class="Hproducts">
<li class="premiere"><a href="#"><img src="images/glass_washers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Glass Washers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="primary"><a href="#"><img src="images/undercounter_dishwashers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Undercounter Dishwashers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="endProduct"><a href="#"><img src="images/planetary_mixers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Planetary Mixers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="primary"><a href="#"><img src="images/pot_utensil_washers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Pot & Utensil Washers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="primary"><a href="#"><img src="images/silver_stainless_burnishers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Silver/Stainless Burnishers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
</ul>
</div>
<img id="productBg2" src="images/second_row_background.png" />
</body>
</html>
CSS Code: body{ margin-right: 10%; margin-left: 10%;}
#content,#nav,#productBg1,#productBg2,.Hproducts,.premiere,.primary,.title{ position:relative;}
#header{ background:url(../images/header.gif) no-repeat; width: 100%; height: 496px;}
#nav{ width:450px; height:60px; background-color:#000000; top: -220px; left:250px;}
/*************************************************/
/******************* CONENT ***********************/
#content{ width: 1100px; top: -200px; margin-left: 50px;}
#content ul{ display:inline;}
#content ul li{ display:inline; list-style-type:none;}
#content ul li a{ text-decoration:none; color: #1a4d9e;}
#productBg1{ top: -110px; left:40px; z-index: -1;}
#productBg2{ top: -410px; left:90px; z-index: -2;}
.Hproducts{ top: -100px;}
.premiere{ margin-left: 15px;}
.endProduct{ margin-left: -180px;}
.primary{ margin-left: -140px;}
.title{ right: 200px; top:10px;}
Hi All, I am facing issues with having more than single space in between a string while displaying it in the list box Example:- <select name="listfield"> <option value="HTML">HTML <option value="HTML TAG">HTML TAG <option value="HTML TAG select">HTML TAG select Now the issue is with the third option.while displaying it on the screen it removes that extra space and displays it as "HTML TAG select" .the actual space between "TAG" and "select" is two white spaces where as it's shown as a single space. Thanks in advance YUGA I am trying to get my site off the ground and am having some kind of issue with a huge white space on the front page. You can see it he http://www.ripeforlearning.com There are two grey boxes - one is a search box and the other is an about us section. Below that, there is a red bar that is supposed to line up with the bottom of the boxes and then, it's followed by the newsfeed. For some reason, between the boxes and the red bar is a huge white space and I can't figure out what's causing it. Any help would be greatly appreciated. Thanks in advance Comments on this post dawnblue2 agrees: Here's what I have... http://img378.imageshack.us/img378/502/currentmw7.jpg ...and here's what I'm trying to get... http://img388.imageshack.us/img388/3810/wantedvp6.jpg Basically, just rid of the white space above "Looking Out For You". Here's the coding for the page in a text file... http://www.megaupload.com/?d=JG3ELL2T If anyone can help me with coding or anything (most likely a table I have to fix), that would amazing and greatly appreciated! Thank You! hello, i have a html code with an horizontal flash menu containing 6 flash buttons. the code is like this HTML Code: .....<td width="790" height="30" colspan="2" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="131" height="30" >
<param name="movie" value="2.swf" />
<param name="quality" value="high" />
<embed src="2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="131" height="30"></embed></object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="131" height="30"><param name="movie" value="3.swf" />
<param name="quality" value="high" />
<embed src="3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="131" height="30"></embed>
</object>.....
... the other 4 flash buttons
when i run IE everything is ok but in opera there is an extra space between every 2 flash buttons and i really dont know where that came neighter how to remove them.. thank you, is the first time i enter this forum and it really looks great.my best regards to admins. When I use display:none...it leaves a blank space of what would be there other wise...i tried using visibility: none also...couldnt get it to work.. any help would be great as google isnt very useful on this one. thanks! On every other page, my table around my content works, but on the main page: http://www.snowwhitedesign.com there is a lot of white space below my image. My entire image is broken down into 3 x 3 images, 9 total in the grid. All images have different heights and widths I constructed the table by first creating the larger table with the blue border, and then created separate vertical tables within each vertical <td> since the images are of different heights. Also, how can I get rid of that small border line running right through the middle of my image? thanks! I have a slight HTML problem that I cant figure out...There is this white-space above my text area that I cant figure out how to get rid of... Can someone please help me and tell me what I am missing or how to fix it... Here is a screenshot of where the whitespace is... Here is a link to the HTML file in zipped format http://www.pstsync.com/index.zip the Site is : http://www.PSTSync.com thanks Ishan |
|||||||