Here's the site: www.red-tuxedo.com
I want the "Red Tuxedo" text to sit next to the logo, not below, and I want to get rid of that hard rule that runs through the logo. My CSS / HTML skills aren't up to it. I completely destroy the column layout when I change the text and I can't find the hard rule in the code. Tried adjusting the gif (cut off the bottom in Photoshop) and that didn't help.
I did write to the person who created the template; haven't heard back after several days. Would like to get this fixed before I start adding more pages.
thx
One way is to move the logo within the #logo div:
<div id="header-logo">
<div id="logo"><img height="60" width="60" alt="Red Tuxedo Logo" src="logo_red_tuxedo.gif" id="logo_red_tuxedo"/><span class="red">Red</span>Tuxedo</div>
<form action="#" class="search" method="post">
<p><input type="text" class="textbox" name="search_query"/>
<input type="submit" value="Search" class="searchbutton" name="search"/></p>
</form>
</div>
Try changing the div (id=logo) so that it includes the logo image and the text and add align='absmiddle' to the image. I'd suggest CSS but it looks like it has fixed attributes on it anyway. The "rule" looks like it is coming from the background image for the body element. You'd need to update the file bg.gif to modify it, I think.
<div id="logo">
<img id="logo_red_tuxedo" src="logo_red_tuxedo.gif"
alt="Red Tuxedo Logo" align="absmiddle" height="60" width="60">
<span class="red">Red</span>Tuxedo
</div>
To move the text, I'd put the image inside the logo div, the way dmondark suggested. As for the hard rule, it's part of the background image for the body, bg.gif. Here's an edited version I made that doesn't have it.
Related
After inserting an image into my template, a set of boxes further down the page seem to have drifted out of sync with the rest of the template and I'm baffled as to why. I have tried messing with certain padding and margins and can't seem to keep the image along with the correct alignment.
The Code
<div id="SuperContentsWrapper">
<div id="SuperContents">
<div id="SuperContentsSub">
<h1>
<div align="center">
<font color="#A35E41"><em><font color="#000000">Batman Vs Superman Boys' T-Shirt</font></em></strong></font>
</div>
</h1>
<p>
<div align="center"> <img src="http://nutty-squirrel.co.uk/Kieran%20Completed%20SKU%20/Batman%20Test.png?" height="100%" width="100%">
<p>
<div align="center">
<font size="3">Great for all occasions, this Batman Boys T-Shirt will receive a great reception anywhere. This T-Shirt looks and feels great and is made with 100% innovative SofSpun Cotton and has a longer-line for a more fashionable looking T-Shirt.</font>
</div>
<p> </p>
<div align="center">Brand: Fruit Of The Loom </div>
The image causing the issue is: <div align="center"> <img src="http://nutty-squirrel.co.uk/Kieran%20Completed%20SKU%20/Batman%20Test.png?" height="100%" width="100%">
Please let me know if there is anymore code needed to understand why this is happening!
To expand my answer in the comments, the lack of a closing </div> tag after the image meant that the browser engine would render everything following that unclosed <div> as being inside that <div> until a matching closing tag was found, which will cause damage to the entire visual layout thereon downwards.
I can't float my image the way I want in the post editor. I need to have it sit next to several separate elements (2 different headings + a paragraph), not just one element. And I see no way to do that.
Any suggestion would be welcome.
I would do it in the text tab of the editor like this.
<img src="my image" style="float:right" />
<h3>Title</h3>
<h4>Discription</h4>
<p>paragraph text</p>
You want the <img> with the float:right property first, then the rest of headings and the paragraph
Here is a demo http://jsfiddle.net/d55psoqq/
Note: the Wordpress "alignright" property usually added when you add an image with the media manager, will do the same as the style="float:right;" if it is properly defined in the stylesheets. (I have encountered some themes were it is not defined) If "alignright" does not work you can add it to the main stylesheet like this...
.alignright {float:right;}
Update:
To get all the text to stay at the left and never flow under the image, you need to force it into a column like this...
<img src="http://placehold.it/350x200/" style="float:right" />
<div style="overflow:hidden">
<h3>Title</h3>
<h4>Discription</h4>
<p>paragraph text</p>
</div>
Demo http://jsfiddle.net/d55psoqq/3/
can anyone please help me? I have this example of list of links with description. http://jsfiddle.net/FcN57/3/ and I need the decription to start at same line as the first link, but it's allways starting one line below. I thought that inline-block divs should be displayed side by side
If you need to keep the <br /> for some reason (although i don't recommend it like the others here), then the following might work for you:
http://jsfiddle.net/FcN57/12/
I added floats and a clear:both to put them on the same line.
You have page breaks in your code. A <br> will break the flow and put any elements after it on a new line, regardless of display type.
Remove them and it works fine.
http://jsfiddle.net/Kyle_Sevenoaks/FcN57/6/
To display description on same line, remove <br /> tag. Also you can use span instead of div. span will display text on same line.
http://jsfiddle.net/FcN57/10/
They are being displayed inline unfortunatly you've forced a line break here
<div class="EsdVyberDocOdkaz">
<a href="9CYjKkqzUU71" >link</a>
<br> //this is your issue
(
<a href="9CYjKkqzUU71" >link</a>
)
</div>
You can either remove that line break and have everything on one line or move your bracketed link after your description like so:
<div class="EsdVyberDoc">
<div class="EsdVyberDocOdkaz">
<a href="9CYjKkqzUU71" >link</a>
</div>
<div class="EsdDocTitul">
description description description
</div>
<br />
(
<a href="9CYjKkqzUU71" >link</a>
)
</div>
I have a load of wizard controls and I need to slightly modify the html it is spitting out around the navigation. Currently I have the below..
<div class="nav">
<input type="submit" value="Back" class="secondary" id="FinishPreviousButton" name="FinishPreviousButton">
<input type="submit" value="Submit" class="primary" id="FinishButton" name="FinishButton">
</div>
I have added my desired classes to the buttons, primary and secondary, but i cant seem to work out how to change the containing div's class from nav. I've already tried .NavigationStyle.CssClass but that isnt doing the trick.
Any ideas?
My bad, NavigationStyle.CssClass was getting overridden. Sorted now.
I am using asp.net and C#.
I have a image and three line. Which I want to place like this
Like the one you can see in this below URL .
http://www.campaignmonitor.com/gallery/
Image is on the left side and parallel to image we can write text.
I know that the same can be acheived by HTML table / ASP.NET table like this
<table>
<tr>
<td>
<img src="#"/>
</td>
<td>
first line <br />
second line <br/>
third line <br />
</td>
</tr>
</table>
but my problem is that I can't use table, so please let me know how can i acheive the above task without using tables.
Might be <span> or <div> tag can do the trick. but I am really dumb in html. and I can't ever search the exact answer to my problem on google..
Using CSS, you can float the image to the left, which will cause the text to appear to the image's right.
For example, take the following:
<html>
<head><title>Example</title></head>
<body>
<div style="float:left"> <!-- I've floated the div containing the image to the left -->
<img src="http://www.google.com/images/srpr/nav_logo13.png">
</div>
This is text that is to the right of the image.
</body>
</html>