1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Round Table Border Using Kompozer

Discussion in 'HTML & Website Design' started by enterprisemind, Jan 10, 2013.

0
  1. #1
    HI DP Family,

    I am currently re-designing a webform for my autoresponder campaign using Kompozer. I have figured out how to do everything but round the corners. Any suggestions? Please advise.


    Thanks.
     
    enterprisemind, Jan 10, 2013 IP
  2. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #2
    Round the corners of? Buttons? Textboxes? What?
     
    Rukbat, Jan 11, 2013 IP
  3. enterprisemind

    enterprisemind Member

    Messages:
    96
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    38
    #3
    All of them. I'm working on a webform(table) and would like to round the corners of it and the buttons.
     
    enterprisemind, Jan 11, 2013 IP
  4. Rukbat

    Rukbat Well-Known Member

    Messages:
    2,908
    Likes Received:
    37
    Best Answers:
    51
    Trophy Points:
    125
    #4
    An HTML table used for a form? Tables are used for tabular data, not for placement. You need to rethink your design first.
     
    Rukbat, Jan 11, 2013 IP
  5. jeffsmith

    jeffsmith Member

    Messages:
    203
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    26
    #5
    use the input and label field for the form secondly the round border can be made through border radius property in CSS or else you will have to crop the image.
     
    jeffsmith, Jan 11, 2013 IP
  6. creativewebmaster

    creativewebmaster Active Member

    Messages:
    654
    Likes Received:
    7
    Best Answers:
    4
    Trophy Points:
    78
    #6
    round the corner mean? can you please let me know your question in details and show me your website.
     
    creativewebmaster, Jan 12, 2013 IP
  7. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #7
    That's a given if Komposter is on the job... since as something that encourages the use of it's WYSIWYG you can bet dimes to dollars it's endless pointless DIV around tables for layout with nothing remotely resembling semantic markup or separation of presentation from content.

    But again, without seeing the page in question anything we say is guessing wildly; though if it's anything like the laundry lists of "how not to develop websites" in the OP's signature...
     
    deathshadow, Jan 13, 2013 IP
  8. enterprisemind

    enterprisemind Member

    Messages:
    96
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    38
    #8
    I don't think you have any idea what I'm referring to. Thanks for trying.
     
    enterprisemind, Jan 14, 2013 IP
  9. enterprisemind

    enterprisemind Member

    Messages:
    96
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    38
    #9
    I am taking the HTML code from my auto-responder and editing the webform image using Kompozer. I and attempting to round the corners of the button and the borders. The site is http://www.theenterprisemind.com. Thanks for your assistance.
     
    enterprisemind, Jan 14, 2013 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Nope, he guessed EXACTLY what you are referring to -- as the link to your page confirmed. The entire thing is chock full of all the things one expects from a WYSIWYG editor, and as such for someone like Rukbat or myself to even want to bother to try and help you, we'd have to throw that entire mess of code away and start over from scratch -- it would be faster than to try and do anything with the decade and a half out of date methodology and nonsensical code that editor saddled you with.

    Since you have tables for no good reason, presentation inlined in the markup, nothing remotely resembling semantics, and the whole other host of things that basically throw accessibility out the window. Hence your 11k of markup to deploy 336 bytes of actual content and two inputs. The code doesn't even make sense having multiple HEAD, multiple TITLE, massive tables with even more massive STYLE attributes for christmas only knows what -- it's a laundry list of how not to build a website -- and ENTIRELY what one can expect from Kompozer.

    Editors like Kompozer, Frontpage, the preview pane in Dreamweaver, etc, etc, are NOT how you build a website -- they amount to nothing more than nube predation and broken methodologies. Anyone telling you otherwise is packing you so full of sand you could change your name to Sahara.
     
    deathshadow, Jan 15, 2013 IP
  11. enterprisemind

    enterprisemind Member

    Messages:
    96
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    38
    #11
    Sounds like a good suggestion, but I don't know how to manipulate the input fields. Do you have a tutorial you recomend to learn how? I already tried the border radius linein the code and it wouldn't stick. Thanks for responding.
     
    enterprisemind, Jan 15, 2013 IP
  12. enterprisemind

    enterprisemind Member

    Messages:
    96
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    38
    #12
    This is a very wordy analysis that left out how you would recommend rounding the corners. I understand that the code from the auto responder is subpar as well as the editor. But, for now that's what I have to work with. Any suggestion is still welcome. Thanks again for responding.
     
    enterprisemind, Jan 15, 2013 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Ok, see this:
    
		<div align="center">
		  <table border="0" cellpadding="10" cellspacing="0">
			<tr>
			  <td valign="top">
			  			  <img src="http://theenterprisemind.com/wp-content/uploads/2012/12/The-Road-to-a-50k-Mailing-List-250.jpg">
			  			  			  </td>
			  <td valign="top">		<p align="center">
		<img src="http://theenterprisemind.com/wp-content/themes/u-design/wpoptins_images/arrowdown.gif" width="273" height="114">
		</p>
		      			<html>
<head>
  <title>Enterprisemind Webform</title>
</head>
<body>
<center>
<table style="margin: 0px; padding: 0px; position: relative;"
 border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td align="center" valign="middle">
      <form action="http://www.listwire.com/form/process.php"
 method="post">
    Code (markup):
    That HAS to go before we'd even THINK about rounding the corners. Two tables for nothing, multiple bits of code that have no business in your markup any time after 1998... Hell, I can't even figure out where you're setting the blue background... but see that second HTML, HEAD and BODY? You can't do that -- PERIOD.

    You've got too many problems for us to even TRY adding what you are asking... you should probably learn a lot more about HTML and CSS before even attempting what you are asking; or hire someone to rewrite the ENTIRE page from scratch.

    I can't put it much more plainly than that. You're looking for a silver bullet fix when it needs to be burned at the stake.

    I MAY have some time later -- If so I'll toss together one of my infamous rewrites to show you what I mean.
     
    deathshadow, Jan 15, 2013 IP
  14. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #14
    Ok, here's how I'd have done that same site:

    http://www.cutcodedown.com/for_others/enterprisemind/template.html

    as with all my examples the directory:
    http://www.cutcodedown.com/for_others/enterprisemind

    is wide open for easy access to the gooey bits. Works in all modern browsers, IE8/lower doesn't get the shadows or rounded corners (oh noes, not that...) It also is opened up to be elastic design so it auto-enlarges for users using a different default font size.

    You MIGHT be able to extract how I did the form and stick it in your code, but that code has so many major issues I wouldn't even try -- at the same time you load this into Komposter, change anything, hit save, it'll probably shtup the whole thing.

    For JUST the form, the parts you'd care most about are the markup:
    
	<form
		action="http://www.listwire.com/form/process.php"
		method="post"
		id="mailingListJoin"
	/>
		<fieldset>
		
			<label for="mailingListJoinName">Name:</label>
			<input
				type="text"
				name="fullname"
				id="mailingListJoinName"
			/>
			<br />
			
			<label for="mailingListJoinEMail">Email:</label>
			<input
				type="text"
				name="email"
				id="mailingListJoinEMail"
			/>
			<br />
			
			<input
				type="submit"
				value="Give Me My Free eBook!"
				class="submit"
			/>
			
			<input type="hidden" name="bot_account" value="enterprisemind" />
			<input type="hidden" name="bot_pass_standard" value="1" />
			<input type="hidden" name="bot_pass_custom" value="0" />
			<input type="hidden" name="bot_redirect" value="http://theenterprisemind.com/thank-you-50k/" />
			<input type="hidden" name="bot_track_code" value="" />
			<input type="hidden" name="bot_web_form_id" value="46566" />
			
			<p>
				We Hate Spam Too. Your information will not be sold, leased, or shared.
			</p>
			
		</fieldset>
	</form>
    Code (markup):
    ... and the CSS for it:
    
#mailingListJoin {
	overflow:hidden; /* prevent float indent */
	zoom:1; /* trip haslayout, prevent float indent IE */
	padding:114px 3.5em 0;
	font:normal 65%/200% tahoma,helvetica,sans-serif;
	background:url(http://theenterprisemind.com/wp-content/themes/u-design/wpoptins_images/arrowdown.gif) top center no-repeat;
}

#mailingListJoin fieldset {
	padding:1em 0.5em 0;
	color:#FFF;
	background:#237;
	-webkit-border-radius:0.5em;
	-moz-border-radius:0.5em;
	border-radius:0.5em;
}

#mailingListJoin p {
	line-height:1.4em;
	padding-top:0.5em;
}

#mailingListJoin label {
	display:inline-block;
	width:3.2em;
	text-align:right;
}

#mailingListJoin input {
	width:15em;
	padding:0.2em;
	font:normal 100%/120% tahoma,helvetica,sans-serif;
	border:1px solid #000;
	-webkit-border-radius:0.25em;
	-moz-border-radius:0.25em;
	border-radius:0.25em;
	-webkit-box-shadow:
		inset 1px 1px 2px #CCC;
	-moz-box-shadow:
		inset 1px 1px 2px #CCC;
	box-shadow:
		inset 1px 1px 2px #CCC;
}

#mailingListJoin input.submit {
	display:block;
	padding:0.25em 0;
	margin:0.75em auto 0;
	font-weight:bold;
	background:#EEE;
	-webkit-box-shadow:
		inset -1px -1px 2px 1px #CCC,
		inset 1px 1px 2px 2px #FFF;
	-moz-box-shadow:
		inset -1px -1px 2px 1px #CCC,
		inset 1px 1px 2px 2px #FFF;
	box-shadow:
		inset -1px -1px 2px 1px #CCC,
		inset 1px 1px 2px 2px #FFF;
}

#mailingListJoin .submit:active,
#mailingListJoin .submit:focus,
#mailingListJoin .submit:hover {
	background:#DDD;
}
    Code (markup):
    The various -webkit and -moz versions are due to those browsers having this idiotic 'testing' prefix idiocy for CSS3 properties. Notice we have an actual fieldset wrapping the inputs and labels around your field labels -- their 'for' attributes pointing at the ID's on them like they're supposed to. Also that animated arrow I moved to the CSS since it's not really content, and as such has ZERO business in the HTML.

    It's somewhere between half and a third the code, take a good hard look at it to see exactly why most people are going to tell you to throw kompozer in the trash and learn to do it properly instead -- particularly if this is a money-making venture.
     
    deathshadow, Jan 15, 2013 IP
  15. coderphp6

    coderphp6 Member

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    31
    #15
    coderphp6, Jan 15, 2013 IP
  16. enterprisemind

    enterprisemind Member

    Messages:
    96
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    38
    #16
    Very impressive!! This example is exactly how I want the auto responder form to look. So, are you offering these subdirectory files for me to upload with my FTP client or were they just for illustration?
     
    enterprisemind, Jan 16, 2013 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #17
    If you want to use the code, go ahead and grab it. When I make my examples I do so without such restrictions in mind. Wouldn't make much sense otherwise.
     
    deathshadow, Jan 16, 2013 IP