I would like to ask how to "lock" background img regardless of amount of text on page. I have 2 background imgs (1 in left, 1 in right). Over that is text article. On every page is different amount of text and imgs aren´t on same spot. If add height: 100% to .pozadi imgs locks out and are on the same spot on every page but in this case text overflows its parent element(.pozadi).
I am aware that giving webpage as example isn´t the best way because probably won´t be there unfix forever but I think that eg. I made below isn´t good enough.
http://matmasar.wz.cz/kompresory/kompresory.html I am talking about the helix in background. If you open page "prodej kompresorů" or "opravy kompresorů" you will probably understand my problem more.
The sroubovice is a attribute of body so I made a wrap div for example.
#primary_nav_wrap {
float: left;
width: 22%;
margin: 0;
z-index: 1;
}
#sroubovice {
background-image: url(http://matmasar.wz.cz/fotky/pozadi.png), url(http://matmasar.wz.cz/fotky/pozadi.png);
background-position: left, right;
background-repeat: no-repeat;
height: 100%;
}
.tlacitka {
color: white;
background: #000;
padding: 10px 20px 10px 20px;
}
.pozadi {
background: #e7f1f5;
float: right;
width: 76%;
}
<div id="sroubovice">
<img src="../fotky/zahlavi3.jpg" id="zahlavi">
<article>
<section>
<h1>Prodej kompresorů</h1>
<div id="wrap">
<nav id="primary_nav_wrap">
<ul>
<a href="../index.html">
<li class="tlacitka" style="border-top-left-radius: 15px;">Domů</li>
</a>
<a href="kompresory.html">
<li class="tlacitka">Kompresory</li>
</a>
<a href="opravy.html">
<li class="tlacitka">Opravy kompresorů</li>
</a>
<a href="../kontakt.html">
<li class="tlacitka" style=" border-bottom-left-radius: 15px; border-bottom: none;">Kontakt</li>
</a>
</ul>
</nav>
<div class="pozadi">
<br> Pokud Vám dosluhuje Vaše stávající kompresorová stanice nebo projektujete zcela novou instalaci stlačeného vzduchu, můžeme Vám nabídnout řešení s použitím velmi kvalitních kompresorů a dalšího příslušenství pro úpravu stlačeného vzduchu
firem Gardner Denver a CompAir.
<a href="gardnerdenver.html">
<img src="../fotky/gardnerdenver.png" alt="Gardner Denver logo" title="Gardner Denver logo" class="logo"></a>
<img src="../fotky/CompAir.png" alt="CompAir logo" title="CompAir logo" class="logo" style="margin-bottom: 50px;">
<ul style="font-weight: bold;">
<li>Napište si o cenovou nabídku</li>
<li>Společně zkonzultujeme Váš projekt a navrhneme ideální řešení.</li>
<li>Neváhejte nás kontaktovat</li>
</ul>
</div>
<!-- Konec div class pozadi -->
</div>
<!-- Konec div id wrap -->
Try this:
#sroubovice {
background-position: center top;
}
I found out the solution.
I removed .pozadi from body and replaced article with div as a first child element of body. So it looks like this
<body>
<div id="sroubovice">
<section>
....
</section>
</div>
</body>
Then added height 100% and background-position: left top(or 140px for more exact result), right 140px to .pozadi
#sroubovice{
background-image: url(../fotky/pozadi.png), url(../fotky/pozadi.png);
background-position: left 140px, right 140px;
background-repeat: no-repeat;
height: 100%;
}
Related
Maybe it's a bug, I'm not sure, but when using the mobile collapse menu, the icons and the text are not aligned (see images).
The reason is because of these CSS properties:
HTML:
.side-nav a {
color: #444;
display: block;
font-size: 1rem;
height: 64px;
line-height: 64px;
padding: 0 30px;
}
nav i.material-icons {
display: block;
font-size: 2rem;
height: 56px;
line-height: 56px;
}
<ul style="transform: translateX(0px);" class="side-nav" id="mobile-menu">
<img src="images/costum_logos/logo3.png" class="custom-logo">
<div class="divider"></div>
<a href="index.php" class="waves-effect waves-light">Albums
<i class="material-icons left notranslate">collections</i>
</a>
<a href="?page=settings" class="waves-effect waves-light">Settings
<i class="material-icons left notranslate">settings</i></a>
<a class="waves-effect waves-light red-text text-lighten-1" href="index.php?logout">Logout
<i class="material-icons left notranslate">power_settings_new</i>
</a>
</ul>
Of course, the interesting bits are the line-height and height properties on both the anchor tag, and the icon tag. They are not equal. If I override either one of them, to be exactly like the other - they are perfectly aligned.
My question is: Am I doing something wrong? I can easily get around it, but I want to have a good practice with materialize CSS. Don't wanna hack around and break their conventions.
Thanks in advance!
I am trying to get an image aligned right of some text/lists while having the image still be 100% in height and within the div. So far I've come close but the image is always overlapping the bottom of the div. Here's an example of what I'm trying to achieve:
Here's the code I've come up with so far, I've been using inline CSS but once I've figured it out it'll be in a separate CSS file. Any help is really appreciated, been trying to figure this out for days!
<div style="background: #000; width: 90%; color: #fff; margin: 0 auto; text-align:left; border: 1px solid #95403c;">
<p>
<img style="float: right; margin: 1px 1px 1px 1px; width: 355px;" src="" />
<div align="center">
<h1>Gold (proper style coming soon)</h1><br />
<clear>
<u>All Edited Videos Include:</u>
<ul style="display: inline-block; text-align: left;">
<li>60-90 Minute Interview Documentary</li>
<ul><li>B-Roll Footage</li>
<li>Incorporation of personal video clips (up to 15) and photographs (up to 125)</li>
<li>Interview Transcript</li></ul>
<li>1-2 Minute Individual Clips of Family Members </li>
<li>Up to 5 individuals will share a favorite memory with or express their love for the subject </li>
<li>5-10 Minute Prized Possession</li>
<li>The subject will share and describe their most prized possession</li>
<li>Behind The Scenes Photographs</li></ul>
</ul>
<clear>
<div style=" display: inline-block; vertical-align: top;">
<u>You Will Receive:</u>
<ul style="display: inline-block; text-align: left;">
<li>USB flash drive with all edited video files,<br /> pictures, and interview transcript</li>
<li>15 DVDs</li>
<ul><li>Customized printed DVDs</li>
<li>Customized menu and chapters</li>
<li>Hard cases with customized insert</li></ul>
</ul></div>
<div style="display: inline-block; vertical-align: top;">
<u>All Edited Videos Include:</u>
<ul style="display: inline-block; text-align: left;">
<li>Customized Titles</li>
<li>Customized Graphics</li>
<li>Music</li>
<li>Sound Design</li>
<li>Color Correction</li>
</ul>
</div>
<clear>
<br style="clear: both;" /></p>
</div>
A few days ago I was working on a classic menu. It has a logo on the left and some menu buttons on the right. This was my first try – fiddle1. But someone from this community told me that menus normally aren't coded like that but with <ul>and <li>.
So I tried to rebuild that menu – fiddle2. Unfortunately nothing works.
My first issue is that I have the feeling that the <div id="menubuttons"> is not located IN the <div id="header">. The second problem is that <div id="menubuttons" align="right"> isn't aligned right as it should be.
Can you help me to get the visual result of fiddle1 with <ul>and <li> tags?
ul element by default will take margin
So please add css like this, it will remove the default margin and padding
ul{margin:0; padding:0}
#menubuttons { float:right}
Check this Demo
I changed some code, try this:
http://jsfiddle.net/WnneG/
<ul style="float:left;paddin:0px;margin:0px;">
<li class="menubutton"> Home
</li >
<li class="menubutton"> Info
</li>
<li class="menubutton"> Spenden
</li >
<li class="menubutton" align="right" style="margin-right: 20px;"> Kontakt & Impressum
</li >
</ul>
replace this line of code:
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" align="right">
with:
<div id="header_logo" style="float:left;">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;" />
</div>
<div id="header_menu" style="float:right;">
hopefully you will get your desired result if this help You please mark it as green
See the code in the fiddles you posted. Yours tries to create a menu from divs, while the one you are trying to get to, has <li> items with float: left;
Put to <li> tag style display:block;float:right; like this: <li style="display:block;float:right">
Use float = right instead of align for the div menubuttons.
#menubuttons {
margin-right: 0;
margin-top: 0;
height: 2.5em;
line-height: 2.5em;
display: block;
float:right;
}
I have created a version of your menu. I think this helps: http://jsfiddle.net/yBTJF/4/
.menu
{
height: 30px;
background: #FFFFFF;
line-height: 30px;
list-style: none;
padding: 0 5px;
margin: 0px;
}
If you want :hover, all you have to do is create a selector in your CSS:
.menu a:hover
{
// ...
}
I am relatively new to HTML/CSS and am having an impossible time making two pics line up with an ASP MVC website. The bookend pic we are using for the menu bar cannot line up with the rest of the background pics. Below is a screenshot of the problem, the HTML and the CSS. The bookend pic that is not adjusted correctly is NAV-Left-Corner, and it's id in the CSS is "#menuLeft." The rest of the nav bar uses a small blue pic repeated horizontally. That portion of the CSS can be found in the "ul#Menu" section. (I'm having the same problem with the right bookend, just wanted to simplify things for the sake of this post)
HTML
<body>
#using Monet.Common
<div class="page">
<header>
<div style="margin: 20px;">
#* Monet *#
<span href="Home" style="color: white; font-size: 36px; font-weight: bold;text-decoration: none;" onclick="DoFun();">Monet </span>
<span style="color: white; font-size: 18px; "> </span>
</div>
#* </a>*#
#* <div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>*#
<nav>
<ul id="menu">
<img src="../../Content/images/NAV-Left-Corner.gif" id="menuLeft" alt="mLeft"/>
<li id="mTop">#Html.MenuLink("Agents", "Index", "Agent")</li>
<li class="mProducts">#Html.MenuLink("Products", "Index", "Product")</li>
<li class="mPt">#Html.MenuLink("Product Training", "Index", "Course")</li>
<li class="mCe">#Html.MenuLink("Continuing Ed", "Index", "ContEdCourse")</li>
<li id="mBottom">#Html.MenuLink("Help", "About", "Home")</li>
<img src="../../Content/images/NAV-Right-Corner.gif" id="menuRight" alt="mRight"/>
</ul>
</nav>
</header>
<img src="../../Content/images/TEST2body_top.png" id="topPic" alt="tag"/>
<section id="main">
#RenderBody()
</section>
<footer>
<span style="color: Gray;"> Copyright © 2012 For Internal Use Only. </span>
</footer>
</div>
</body>
CSS
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
#menuLeft
{
vertical-align:middle;
}
#menuRight
{
vertical-align:middle;
}
I agree with Nile in comment ("dont do it this way").
Anyway - you can just move anything up or down by adding some padding or margin. You can also use negative padding-top, to move image up, even outside its container.
ul#menu {
/*border-bottom: 1px #5C87B2 solid;*/
background-image: url('../../Content/Images/Nav-Background.gif');
background-position:center;
background-repeat:repeat-x;
/* HERE */
padding: -5 0 2px;
position: relative;
margin: 0;
text-align: right;
}
Im not sure that is recipe for you, but it may be good tip about positioning items.
Edit/added later:
Maybe you should not experiment with CSS in serious app like this. App "for internal use only" dont need fancy effects.
Read good tutorial about CSS and make some exercises (positioning, gradients, browser support) before you use it in work :)
The New Boston is very good website with most professional free courses and tutorials i ever saw.
I am using light box for image but the close array display at the left top but i want it to the right I am new to CSS.
My HTML code is given for light box on linkbutton one
<div class="linkbutton">
<img src="image/smallicon_2.png" alt="" />
</div>
</div>
<div id="page_two" class="panel">
<div class="main_heading_two">Strategy</div>
<div class="menu">
<ul>
<li class="stix"></li>
<li><img src="image/overview.gif" /></li>
<li class="stix"></li>
<li><img src="image/strategy_active.png"/></li>
<li class="stix"></li>
<li><img src="image/draxxin.gif"/></li>
<li class="stix"></li>
<li><img src="image/excede.gif"/></li>
<li class="stix"></li>
<li><img src="image/results.gif"/></li>
<li class="stix"></li>
<li><img src="image/reference.gif"/></li>
<li class="stix"></li>
</ul>
</div>
<div class="rightclass_one"><img src="image/whiteslide.png"/></div>
<div class="pagetwo_text"><p>Get up to 21 days of BRD therapy strategy using longer-duration antimicrobials DRAXXIN ® (tulathromycin) Injectable Solution and EXCEDE ® (ceftiofur crystalline free acid) Sterile Suspension.
</p></div>
<div class="pagetwo_list_text">Advantages for Producers:
<ul><li>Fewer treatments</li>
<li>Less stress on cattle</li>
<li>Fewer mortalities</li>
<li>Cattle can recover in their own pen
</li>
<li>Lower treatment costs and higher profits
</li></ul></div>
<div class="pagetwo_list_text2">Extended duration strategy
</div>
<div>
<ul>
<li class="midmenu_1"><img src="image/backward.png"/></li>
<li class="midmenu_2"><img src="image/forward.png"/></li>
</ul>
</div>
<div class="right_text"><p>Either way you use them, it takes both DRAXXIN and EXCEDE for control and treatment of BRD in high-risk cattle to give you the longest duration of BRD therapy
</p></div>
<div class="image_21"><img src="image/pagetwo_graph_two_4.png"/></div>
<div class="ratemeter"><img src="image/pagetwo_graph_one.png"/></div>
<div id="one" class="image_one" ><img src="image/optiononetwo.png"/></div>
<div id="two" class="image_two"><img src="image/optiononeone.png"/></div>
<div id="three" class="image_one_one" ><img src="image/pagetwo_graph_two_11.png" /></div>
<div id="four" class="image_two_two" ><img src="image/pagetwo_graph_two_22.png"
/></div>
<div class="option_image"><img src="image/option_1.png" onclick="showHideDiv()"/></div>
<div class="option_image_label">Option 1</div>
<div class="option_image_one"><img src="image/option_1.png" onclick="showHideView()"/></div>
<div class="option_image_label_one">Option 2</div>
<div class="fourteen_day"><img src="image/button_14days.PNG"/></div>
<div class="heading_one">Post Metaphylaxis Interval (PMI)</div>
<div class="linkbutton_one">
<img src="image/smallicon_1.png" alt="" />
</div>
<div class="seven_day"><img src="image/button_7days.PNG"/></div>
<div class="heading_two">Post Treatment Interval (PTI)</div>
<div class="linkbutton_two">
<img src="image/smallicon_1.png" alt="" />
</div>
</div><!-- End of page two-->
Belos is my css which used for light box
.lb-data .lb-close {
width:35px;
position: absolute;
float: right;
padding-bottom: 0.7em;
outline: none;
top:-35px;
}
Image shows cross sign on right side but far away from image
apply:
right:0px;
float won't work in conjunction with absolute positioning.
Write like this:
.lb-data .lb-close {
width:35px;
position: absolute;
padding-bottom: 0.7em;
outline: none;
top:-35px;
right:0;
}
& there is no need to define float when you use position:absolute because float is not work with position:absolute
It's not easy to answer without seeing some other html code, anyway float and position: absolute don't work together. I suggest you to remove the floating and add right: 0; to your css definition. You should also be sure that the parent of .lb-close has set position: relative;
.lb-data .lb-close
{
width:35px;
position: absolute;
/*float: right;*/ <-- delete this
padding-bottom: 0.7em;
outline: none;
top:-35px;
right: 0; <-- new line to add
}
One important thing float doesn't work with absolute-position so you don't need to define float over here u just need to add right:0; i hope this will work smoothly....
.lb-data .lb-close {
width:35px;
position: absolute;
padding-bottom: 0.7em;
outline: none;
top:-35px;
right:0;
}
UPDATED ANSWER
see here the demo is working fine:-
http://jsbin.com/ilixux/5/edit
I have made this through position:relative; to its parent and position:absolute; to its child and now its working fine as you can see....
add left: to your css code and place it where you exactly desire it.
eg:
left: 100px;