PDA

View Full Version : what i see is what i do not get


Luke196
06-11-2008, 04:34 AM
WYSIWYG-sometimes.

I am using a preset template, 2columnfixedheaderandfooter, and having problems with the header.

I have applied absolute positioning through css to an image I want to the left of my text in the header. However, when I preview it in the browser (the image), it is never quite where I wanted it be like it was in the editor. When I avoid absolute positioning and insert the image into the header, the container itself grows to accomodate the size of the image forcing my text downwards along with the expansion! This would be okay if i wanted my text to be closer to the bottom of the header, but I want it to be at the top. When I insert the image directly, it is usually true to keeping its place once I preview it, and the text is always obediant once aligned. Any help would be much appreciated.

Also, below the header I wanted to insert a google search bar. I switched to code view and copied and pasted some html from this website:

http://www.askdavetaylor.com/how_can_i_add_a_google_search_box_to_my_web_site.h tml

The search bar itself has below it a check box relative to the primary site. How could I edit this form to set the check box up next to the google search button as opposed to below it? When I apply absolute positioning to the form itself, I get the same problem I do with image placement when trying to preview in the browser. How do I correct this problem?

Oh, one more thing. :roll: When attatching links to text, my text turns purple and becomes underlined once previewed. How do I stop this madness? It's woven more nightmares than I need.

domedia
06-11-2008, 05:54 AM
AP: this is absolute positioning. It will never be off a few pixels. You're doing something wrong :-/

Links are by default underlined, and visited links are by default purple. The web was designed this way. You can override both with CSS. The CSS property for underline is TEXT-DECORATION, and for links just define them (remember to use proper order of link, visited, hover, active)

Corrosive
06-11-2008, 07:56 AM
You can also change links styles in the 'links' box of the Page Properties section of DW (somewhere near the foot of the screen). You can choose how links are styled throughout your page i.e. what colour they go when rolled over, what colour they are when they have been visited, whether the underline is permanent or just on rollover etc. be careful though. Try not to 'hide' your links from viewers by over styling them. they are usually purple and underlined because this is a 'standard' and what people all over the world recognise as a link.

As for Google Search, have you tried Google :roll: :wink: ??

Start a Google account and they will let you set up a Google Search Box. There are various styling options and you can set it to search just your site or the whole web. Once you have what you need they will point you to the code/html for your Search Box which you can copy and paste into your site. It's a 5 minute job...honestly. A Google account gives you plenty of other webmaster tool as well.

Cheers

Luke196
06-11-2008, 10:27 AM
I am sure that I am doing something wrong. But what I don't know is why the image does not remain true to form, even with ap. I wonder if it has anything to do with the browser? I will be more than happy to take a snapshot of what I mean, if one of you can tell me how to do that. Thanks for the info on the links and google form though, that will help me out alot, but I want to reillustrate my original problem

(Picture)(Text)

when I preivew the site

(PiTextcture) or even sometimes

(Text)(Picture).

Also, when I insert the picture directly into the head without ap, it resizes the header and forces my text downward, because the image is alot bigger than my text. Is there anyway to modify the text and have it remain at the top?

Corrosive
06-11-2008, 10:31 AM
Can you post a picture of the problem and maybe your code? Or even a link if you are 'live'. To paste a snapshot just use the 'insert image' box at the top of where you are typing your messages in the forum.

domedia
06-11-2008, 04:40 PM
But what I don't know is why the image does not remain true to form, even with ap. I wonder if it has anything to do with the browser? I will be more than happy to take a snapshot of what I mean, if one of you can tell me how to do that.
Modern browsers support absolute positioning. This might have to do with your experience level though in HTML/CSS. Absolute positioning is not appropriate in all circumstances, but it's impossible to help in detail since we're dealing with an invisible page :-(

Use the print screen key on your keyboard for snapshots. Even better is to put your page online somewhere so we can look at it. :)

Look at the link in my signature as well that talks about how to best receive help. Can you provide the code if you cannot put it live somewhere?

Luke196
06-11-2008, 11:54 PM
My site is not yet published. It is a project in its infant stages and I know nothing about being a parent. I would be happy to share the pictures with the both of you, but I am not sure how to post them. Provide your emails and I will send both pictures, the dreamweaver design and its IE counterpart. I can, however, post the 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>Untitled Document</title>
<link href="thrColFixHdr.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:173px;
height:137px;
z-index:1;
left: 52px;
top: 3px;
}
#apDiv2 {
position:absolute;
left:653px;
top:24px;
width:69px;
height:50px;
z-index:1;
}
.style4 {color: #000000}
.image {
position: absolute;
left: 127px;
top: 20px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#apDiv3 {
position:absolute;
left:85px;
top:127px;
width:267px;
height:57px;
z-index:1;
}
.googlebar {
position: absolute;
left: 348px;
top: 127px;
width: 345px;
visibility: inherit;
}
.style7 {color: #000099}
-->
</style>
</head>
<body class="thrColFixHdr">
<div id="container">
<div class="style3" id="header">
<p align="center" class="style4"><br />
<br />
<a href="index.html"><a href="index.html"><img src="Buttons/Home.gif" alt="home" width="132" height="106" class="image" /></a></a>Welcome to <span class="style7"><a href="index.html">MyExterminator</a></span>,</p>
<p align="center" class="style4">Your online resource for modern pest-solutions.&nbsp;&nbsp;</p>
<p class="style4">&nbsp;&nbsp;&nbsp;&nbsp;<form method="get" action="http://www.google.com/search">
<div style="border:0px solid white;padding:0px;width:0em;">
<table border="0" align="center" cellpadding="0" class="googlebar">
<tr><td height="24">
<div align="center">
<input type="text" name="q" size="25"
maxlength="300" value="" />
<input type="submit" value="Google Search" />
</div></td></tr>
<tr><td align="center" style="font-size:75%">
<div align="center">
<input type="checkbox" name="sitesearch"
value="myexterminator.org" checked />
only search MyExterminator<br />
</div></td></tr></table>
</p>
</div>
<div id="sidebar1">
<h3>Sidebar1 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<h3>Sidebar2 Content</h3>
<p>The background color on this div will only show for the length of the content. If you'd like a dividing line instead, place a border on the right side of the #mainContent div if it will always contain more content. </p>
<p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. </p>
<!-- end #sidebar2 --></div>
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. </p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>