I am just working at an CMS site...but just got into a problem that the slider had text been written first in horizantal one line and now it shows into vertical text per word in every line like in a continuous way...so I am really wondering that what's happening the text to be showed in vertical form instead of horizontal form..so friends any help please...anyone who can tell or findout the real issue..!
The Text Is : "Serving Over 40 Years"
Here it's HTML Code :
<div class="txt2">Serving Over 40 Years</div>
While here it's CSS code :
.slider .txt2{
width:100%;
height:30px;
z-index:11;
font-family:'NeouThin';
font-size:30px;
line-height:30px;
color:#000000;
text-shadow:1px 1px 3px rgba(0, 0, 0, 0.9);
}
Here is slider class CSS code please :
.slider {
position: absolute; left:0px; top:0px; z-index:6;
display: block;
width:975px;
height:537px;
overflow:visible!important;
}
And Here is live link to the site please : http://www.huntedhunter.com/raymain_errors/
waiting for your replies..thanks..
Thanks..
Just add white-space: nowrap; to the txt2 class and it works.
Awesome picture slider btw !
You should set your height to auto like this:
.slider .txt2{height: auto /*Rest of CSS Code*/}
The parent element of that text <div style="position:absolute; left:50%; top :-20%;"> has a width of 0 pixels, since it has not a defined width and a position: absolute. If you define the width for this element, say a width of 200px, the inner element with the text will have this width.
Related
I have to work with HTML files where the following tooltip is extensively used:
<div class="tooltip">
Text
<span class="popup">
Tooltip
</span>
</div>
And the CSS:
.tooltip span[class="popup"] {
z-index:10;display:none; padding:7px 10px;
}
.tooltip:hover span[class="popup"]{
display:inline; position:absolute; color:#111;
border:1px solid #DCA; background:#fffAF0;
}
https://jsfiddle.net/f1tztx15/2/
My problem is that the tooltip not only appears when I hover over "Text" but also when I hover over the blank space at the right of "Text" (see below).
Tooltip appearing when blank space is hovered
Is there a way to limit the "hoverable" region to the text without changing the whole tooltip? (I don't really have the freedom to do that)
Thanks!
Try using CSS to limit the width or padding of the element.
Eg.
.tooltip:
width: 100%;
padding: 0px;
This could limit the width of your tooltip element.
You could also just use a <span> element. Which would also contain the element within its own bounds.
I want to draw a horizontal line with image in the middle.
I have referred to stack question , it works great for text but when i add image instead of text, it doesn't works for me.
Here is the js fiddle
.footer_bottom {
width:100%;
text-align:center;
border-bottom: 2px solid #cec5ba;
line-height:0.1em;
margin:10px 0 20px;
}
.footer_bottom img {
padding:0 10px;
}
<div class="footer_bottom"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Google.png/250px-Google.png" alt="Artisan House"></div>
ANy help is really appreciated.
How about using position:absolute; on the image and play with the margin on the div like this margin:45px 0 20px;
Css:
.footer_bottom img {
position:absolute;
top:0;
left:50%;
margin-left:-125px;
}
Check DEMO
Updated (with white background image & vertical centered)
Add background:white; to the img
DEMO
Updated after latest comment
Just used the post you mentioned and added the image instead of the text...
DEMO 3
body {
background-color: white;
color: #000000;
font-family:"arial",arial;
margin:auto;
}
(header logo EWITA) #header {
position:relative;
left:-150px;
background-color:transparent;
text-align:center;
margin-top:50px;
padding:0;}
(HR LINE) hr.main {
position:relative;
top:-5px;
background-color:#353535;
height:10px;
width:100%;
margin:0;
padding:0;
z-index: -1;
}
#menubar {
position:relative;
background-image: URL('./pictures/menu.png');
background-repeat:no-repeat;
left:730px;
top:-40px;
height:25px;
width:300px;
background-color:transparent;
color:#ffffff;
padding:5 0 0 20;
}
(menu bar) table,tr,td {
border-spacing:0;
border-collapse:collapse;
padding:0 10 0 10;
}
(page after head) #wrapper {
margin:auto;
min-height:500px;
background-image: URL('./pictures/background.png');
background-repeat: repeat-xy;
z-index:-2;
}
#content {
margin:auto;
width:700px;
background-color:#ffffff;
margin-top: 40px;
border:1px solid;
padding: 50 30 50 30;
this is my css i am writing a page for a client and due to some relative positioning it makes me a problem with a background as u see here the white line after the HR line.
Thanks everyone who responds.
Edit:
Wondered how to update this answer, as there is a lot to talk about found it best to take it from bottom up. This will bring you to a layout like this:
Stage one demo.
The menu and logo should stay in place when you re-size the window etc.
Had a look at your code now. It is better, but you still have some trouble:
border is still set on image. Invalid markup.
repeat-xy is still used on background. Invalid property value.
#content still has padding without units. Invalid property value.
<br> tags are still used to make paragraphs in text.
There is an extra } after #content. Invalidates CSS file.
Number 4. should be fixed, but not that important right now.
As we already have discussed 1-3 it is hard to understand why you keep them. Invalid markup and styling makes for unreliable result.
It can look OK in one browser, in one version of one browser, look whack in another, and totally break in a third. You get misinformation between code and result. When or if you fix it to be valid other unexpected things may change and you have to do a lot more work to clean it up. As a whole and rule number one. No matter how wrong markup and styling might be seen from a how to do it perspective one have to keep invalid markup and style out of it.
To validate your work, and as you are where you are in regards to experience, do it all the time. Do small changes: validate. Do small changes: validate. And so on. Use:
For HTML
For CSS
Markup
The markup as it is now is not the easiest to style or get to behave good in a dynamic way. hr's is not the easiest to work with and vary between browsers. Do not use tables for menu's or styling. They are best left for what they are intended to: show tabular data. For your menu you can ask yourself: what is the menu; well, it is a list. A list of options for end-user to navigate trough the site. There is a lot of examples on the web using lists as menus. Search the web for CSS list menu etc. You can create nice looking, cross-browser reliable CSS only, (no JavaScript dependency), menus.
But let us start with the basic markup: You will usually find it good to wrap the whole page inside a wrapper. Then add sub-items into that. To position elements like your main menu, logo etc. it could be good to use a wrapper for each and position them by float, margins etc.
In general use margins and padding.
Page layout
Head Div
Divider Div
Content Div
Footer Div
Head
Div float left Div float left
LOGOmenu
Styling + markup
To make it easy for yourself use temporary borders and background colors to view how the various elements float around. Also use the browsers built-in tools to show various things like margins etc. This is invaluable.
Only remember that if you use borders, and you intend to remove them on finished product, they can take up space.
As an example you could have something like this:
Strong colored first attempt.
HTML:
<div id="wrap">
<div id="head">
<div id="logo">
<a href="index.php">
<img id="logo_img" src="http://cupido.g6.cz/pictures/header.png" alt="EWITA" />
</a>
</div>
<div id="menubar">MENU</div>
</div>
</div>
CSS:
* {
margin : 0;
padding : 0;
}
body {
font-family: Arial;
height : 100%;
background : orange;
}
#wrap {
position : relative;
background : pink;
width : 100%;
height : 100%;
}
#head {
position : relative;
width : 800px;
height : 131px;
margin : 100px auto 0 auto;
background : blue;
}
#logo {
position : relative;
width : 431px;
float : left;
background : red ;
}
#logo_img {
width : 439px;
height : 131px;
float : left;
}
#menubar {
position : relative;
background : #fff;
width : 300px;
float : left;
margin-top : 107px;
padding : 3px 0 3px 10px;
}
Note: I use a hard reset of margin and padding on all elements by:
* {
margin : 0;
padding; 0;
}
And then set margins and padding on tags and elements as I use them. Often find this to be a much easier way then the other way around. Remember that things like body also has padding etc. and often can result in undesired spacing.
This way you also get rid of the horizontal scroll-bar at bottom.
By using float on thing like logo and menubar the elements align nicely.
Next we can add the divider. Here we could use a div and set border for top and bottom. On content we use padding to make space between header, text and footer. We also add white border to top of content that aligns nicely with the divider.
Added divider, content and footer.
HTML:
<div id="divider"></div>
<div id="main_content">
MAIN CONTENT
</div>
<div id="footer">
FOOTER
</div>
CSS:
#divider {
border-top : 5px solid #353535;
border-bottom: 3px solid #888;
}
#main_content {
position : relative;
background : url('http://cupido.g6.cz/pictures/background.png');
border-top : 2px solid #fff;
padding : 120px 0 130px 0;
}
Next we can add the content text and style it. Also added style to footer.
With content and styled footer.
HTML
<div class="content_text">
<p>
text text text ...
</p>
</div>
CSS:
.content_text {
margin : 0 auto;
width : 700px;
background : #fff;
border : 1px solid;
padding : 50px 30px;
}
.content_text p {
font-size : 16px;
}
Resize window etc. and see it floats nicely around.
Now it is time to add the menu. As mentioned earlier we can use list for the menu. It is much more suited for the task then a table. In that regard also note that a menu might have sub items, as such a list becomes the only sane option.
Also note on the menu: You likely do not want to style visited links with other color. But that is up to you of course.
With added menu and some re-styling on background colors etc.
HTML:
<ul>
<li><a class="menu" href="smaler.php">úvodní stránka</a></li>
<li><a class="menu" href="sluzby.php">služby</a></li>
<li><a class="menu" href="kontakt.php">kontakt</a> </li>
</ul>
CSS:
As we already have set margins and padding to 0 on all elements this is trivial:
#menubar ul {
list-style : none;
}
#menubar li {
padding : 0 10px;
float : left;
}
a.menu {
text-decoration : none;
color : #fff;
}
a.menu:hover,
a.menu:active {
color : #3cc8a8;
}
Remove helping colors etc. and we have a version 0.1 ready for further testing and expansion.
Result.
Result as one page.
Validated markup on result at W3C
Validated CSS on result at W3C
Original answer:
There is more then one problem. Firstly the markup:
XHTML
<link rel="icon" type="image/png" href="./pictures/favicon.png">
Should be:
<link rel="icon" type="image/png" href="./pictures/favicon.png" />
<link rel="stylesheet" type="text/css" href="style.css">
Should be:
<link rel="stylesheet" type="text/css" href="style.css" />
<img src="./pictures/header.png" width="439" height="131" border="0" alt="">
Should be XHTML 1.0 Strict img tag does not have a border attribute, and need
to be closed:
<img src="./pictures/header.png" width="439" height="131" alt="" />
<hr class="main" /></hr>
Should be:
<hr class="main" />
Use paragraphs to group text, not:
Text<br/><br/>Text<br/><br/>Text ...
but:
<p>Text</p><p>Text</p><p>Text... </p>
CSS
Inline comments are not valid, use:
/* some comment */
Not:
// some comment
You are missing unit on most of your padding values. If a value is non-zero it needs a unit such as pt, px etc. Use:
padding: 5px 0 0 20px;
/* Not: */
padding: 5 0 0 20;
If you do not, it has no/(should not have any) effect.
background-repeat does not have repeat-xy. Use:
background-repeat: repeat;
/* not */
background-repeat: repeat-xy;
or nothing at all, as that is the default.
Fix those first. Then set some color to your things so that it is easier to understand what you want. You can change them back later. Use red, blue etc.
Example.
Regarding zero width no break space bug, as displayed in Vim:
Try adding this CSS:
CSS:
#wrapper {
margin: auto;
min-height: 500px;
background-image: URL('../images/squared_metal.png');
background-repeat: repeat-xy;
z-index: 10;
padding-top:10px;
margin-top:-30px;
}
#content {
margin:auto;
width:700px;
background-color:#ffffff;
margin-top: 10px;
border:1px solid;
padding: 50 30 50 30;
}
I totally overlooked the 'padding-top' css property originally. Thank you all for providing that information!
Please update your site with this CSS and let me know if it works! Since I tested this on my own machine, you should change back the background-url to your custom .png file.
So I can't seem to identify what I'm doing wrong. I created a menu with 4 buttons, namely: Update, Register, Records and Sign out. I placed them together in a class and styled them with CSS. They turned out to be of different lengths, I've tried everything I currently know and understand about CSS and I'm stuck.
Here's the CSS code:
.button2 {
padding:15px 150px;
margin:0px auto;
border-radius:5px;
color:#221e1f;
font-family:corbel;
font-size:20px;
text-decoration: none;
border: 1px solid #d13129;
background: #d13129;
width:300px; /* set a width, can be fixed or percentage */
display:block; /* by default <a> tags arn't block elements and need to be for setting a width */
}
picture with the new edit:
http://gyazo.com/7c7203de14e01873b59e60392fa76207
You should define Height and Width in the css as well. Something like:
height:5px;
width:15px;
Set a width in the CSS (e.g. 'width: 50px;'). Unless you do this the size will match however large the text within the button is (plus the padding/borders).
I am looking or a way to include two images left and right to a title span. The problem I am facing is, that this title will in some cases be stretched across two lines, however not always. I do not want to include two extra elements before/after or after the title but am instead looking for a way to achieve what I am trying without adding new elements to the code. I was therefreo hoping to use :before and :after. This is what I came up with:
.block-title:before { position:absolute; content:""; display:inline-block; width:28px; height:14px; margin:2px 0 0 -36px; background:url(../images/sidebar_ornament_l.png) no-repeat 0 0; }
.block-title:after { position:absolute; content:""; display:inline-block; width:28px; height:14px; margin:2px 0 0 9px; background:url(../images/sidebar_ornament_r.png) no-repeat 0 0; }
While this will work great, if the title is only one line, titles that will take up two lines, will not behave the way, I would want them to, but instead will look like this:
I have tried everything I could think of, to make the :before and :after pseudoelements behave as I want them to, changing position and display, chaing the actual text span position, etc but just couldn't achieve what I want to.
Since I want the two images to align next to the actual text span, a single background image won't work. The spacing between the text and the image would be too big in some cases, which will look odd. Is there a way to make this work, so I will end up with something like this for two line titles:
Thank you!
Well, this is a general concept, i need your full code to provide a specific answer.
Anyway, check this demo
HTML:
<span class="block-title">Some text is here</span>
<hr>
<span class="block-title">Some more text<br>is here</span>
<hr>
<span class="block-title">Even<br>more text<br>is here</span>
CSS:
.block-title {
position:relative;
display:inline-block;
text-align:center;
padding:0 34px; /* width of your ornament + 6px per each side,
adjust to your actual layout */
}
.block-title:before, .block-title:after {
content:" ";
width:28px;
height:14px;
position:absolute;
top:50%;
margin-top:-7px; /* half of ornament's height */
}
.block-title:before {
background:url(../images/sidebar_ornament_l.png) no-repeat 0 0;
left:0;
}
.block-title:after {
background:url(../images/sidebar_ornament_r.png) no-repeat 0 0;
right:0;
}
If you apply it to a span, rules ok. I made this code (i have changed de image) http://jsfiddle.net/sSEDz/