So i have an id of logo, and there is a logo image puted as background-image. I am making mobile webpage,so other divs are ignoring it and are in front of it.
html
<header id="header" class="calign group">
<a id="logo" class="png ru" href="http://www.web.ru/">Webname</a>
<!--other divs-->
</header>
css
#logo.ru {
background: url("images/logo.png") no-repeat scroll left top transparent;
I would suggest jquery, CSS sibling selectors are limited. It would be to easy for it to break because additional content was added to the page.
<header id="header" class="calign group">
<!--other divs-->
<a id="logo" class="png ru" href="http://www.web.ru/">Webname</a>
</header>
#header div:hover~a {
/* these rules apply on hover to the a element.
An a element that comes after this one, but not necessarily
immediately after. In other word #logo.ru */
}
And #logo would need to be positioned with CSS back to where you wanted it.
Related
So I'm trying to display an image through my home page in WordPress. I can display it through css, through a widget, but not by adding it as code to my home page.
I've tried applying z-index, as I have an element which displays text images in that section, but nothing will display.
Image html
<div class="fbfp"><img src="http://4309.co.uk/wp-content/uploads/2020/06/IMG_20200601_134623-300x279.jpg" alt="" width="300" height="279" class="size-medium wp-image-16023" /></div>
And html controlling homepage.
<section class="content-
area pt0 "><div id="main"
class="" role="main">
<div
id="shapely_home_parallax-
2" class="widget
shapely_home_parallax">
<section class="cover
fullscreen image-bg">
<div class="parallax-window
fullscreen" data-
parallax="scroll" data-
image-
src="http://4309.co.uk/wp-
content/uploads/2019/0
8/download-2.png" data-ios-
fix="true" data-over-
scroll-fix="true" data-
android-fix="true">
<div class="align-
transform">
<div class="row">
<div class="top-parallax-
section">
Page here
It should be straight forward in WordPress because you just add the code to the text editor on the page.
Css
.fbfp {position:relative; bottom:300px;z-index: 100;}
parallax-window is the operative part here I think.
As you know, z-index only works with element with position: absolute, fixed or relative, and sticky, I suppose.
Add to your CSS
.fbfp /*or '.fbfp img' */ {
position: relative;
z-index: 9999; /* or any your value*/
}
Remember. If any parent element of your image also has z-index - it will be stronger and
decisive around other elements with z-index on it's level.
Hey I have a problem with social buttons. I am trying to move them but only one show up on my page and I can't move that. I have three buttons and them images can someone help I am trying to put them straight line center of header or above my video.And I want to put them links.
HTML
<body>
<div id="header">
<div id="icons>
<img src="facebook-64.png">
<img src="twitter-64.png">
<img src="instagram-64.png">
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">
CSS
img {
position: absolute;
right: 640px;
top: -50px;
}
video {
margin-top: 250px;
}
#icons {
top: -220px;
}
If using absolute positioning. Each button needs a different class. It is best practice to use classes for css styling and keep id for targeting elements with JavaScript. The images need to be wrapped in links ( tags) and the # in the href below should be set to the URL of your facebook, twitter and instagram home pages.
Personally I would set out html as:
<body>
<div class="header">
<div class="icons>
<a class="fb-link" href"#">
<img src="facebook-64.png">
</a>
<a class="twr-link" href"#">
<img src="twitter-64.png">
</a>
<a class="inst-link" href"#">
<img src="instagram-64.png">
</a>
</div>
<img src="logo2.png">
<div id="nav">
<div id="nav_wrapper">
Rather than use absolute positioning I would simply display the links as blocks and float them left. Use a margin on the containing div to position your icons. See below.
css
.icons{
margin:20px auto; //gives margin of 20px top and bottom and centers buttons horizontally.
width:220px;
}
.fb-link, .twr-link, .inst-link {
display:block;
float:left;
width:60px; //set width to the with of image used eg 64px
margin-left:20px;
}
.fb-link{
margin-left:0; //if margin left was left at 20px the icons would be 20px off center.
}
Using these principles laying out the rest of you pages should be straight forward.
You're giving the same style to all img tags, causing them to overlap! try changing positions for each
This is a live demo: http://baogiadientu.com/demo/fridgevan/
And the result that I want: http://baogiadientu.com/demo/fridgevan/images/demo.png
I want to add a background with an infinite width to two elements (.top-bar and .nav). I have tried to do the same with .bgwhite's background but a scroll bar is appearing, which is not what I want. Does anyone have any advice on how to achieve this without a scroll bar?
Here is my HTML structure:
<div class="container">
<header class="clearfix">
<div class="bgwhite"></div>
<div class="logo">
<img alt="logo" src="images/logo.png">
</div> <!-- end .logo -->
<div class="beside-logo">
<div class="white-spce"></div>
<div class="top-bar">
</div> <!-- end .top-bar -->
<div class="nav">
</div> <!-- end .nav -->
</div> <!-- end .beside-logo -->
</header>
</div> <!-- end .container -->
I'm sure we would have to see the CSS in order to answer to this, but I suppose you have a .css file linked to that .html document, am I right?
In this case, just set the background image to body and mess around with the properties available for the background attribute.
body {
background: url(images/yourbg.jpg) fixed center repeat-x;
}
And in case you mean to set a white background with a bit of transparency to it, so that the site's background is still coming up from back there, try this:
.nav {
background: rgba(255,255,255,0.5);
}
Hope this helps, it's what I understood from the question.
I have set an element's width to 100%, but the border is not going all the way to the edge of the page, It leaves maybe a two-pixel gap each side of the line.
Here is my HTML:
<body>
<div class="headerContainer">
</div>
</body>
Here is my CSS:
.headerContainer{
border-bottom:black 2px solid;
height:40px;
width:100%;
color:blue;
}
Also, another question. I came across this code while looking through a website:
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
<h1 class="brand">Legend!</h1>
<nav class="pull-right nav-collapse collapse">
<ul id="menu-main" class="nav">
<li><a title="portfolio" href="#products">Out Products</a></li>
<li><a title="services" href="#services">Services</a></li>
<li><a title="news" href="#news">News</a></li>
<li><a title="team" href="#team">Team</a></li>
<li><a title="contact" href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<!-- /.container -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
</div>
And I cannot think of any reason to have that many div tags, Wouldn't one--or possibly two--do fine?
And a third question: if I have a div tag within a div tag, How will I reference it in CSS?
The body element has a default margin. Add this:
body {
margin:0;
}
and your space goes away.
jsFiddle example
And there's no real answer to your second question. The structure can depend on numerous things.
Finally, to refer to a div in a div with CSS use div div {...} to target any descendant divs of a parent div, or div > div {...} to specifically target the child div of another div.
1) Include a CSS Reset. The few pixels of space on the edges are most likely due to some kind of padding or margin on the html, body or wrapper element(s). html, body { margin: 0; padding: 0; } would also probably fix it.
2) There is probably not a need for that many nested div tags in the code you pasted, but it's hard to say without knowing the functionality (there is probably a lot of javascript involved in how that navigation works). Even so, that code can probably be significantly improved / simplified.
3) You can reference a div tag inside of a div with the CSS selector div div { } which selects all div tags that live inside at least one other div tag. div > div { } by contrast would only select div tags that are nested immediately inside another div as a direct child.
try adding this line at the top of the css:
*{
padding: 0;
margin: 0;
outline: 0;
}
Add body {margin: 0;} to your CSS. Body has a margin by default, and you need to remove it. Adding padding: 0; or outline: 0; (as suggested in another answer) is not necessary.
Sometimes you will need extra containers in your HTML code to apply CSS to separate parts of your content. One example is when you want to have a sticky footer at the bottom of your page be separate from the rest of your page's CSS rules.
Not exactly sure what you mean by your question, but you can select children of elements a number of ways. Without giving an example, you can try parentelement > childelement for immediate children.
2) The large amounts of DIV's in your example probably comes from Twitter Bootstrap. I would claim that by the use of many divs and lots of separated CSS classes Bootstrap becomes a flexible CSS framework. Useful in different layouts and good for quick mockups.
You can definitely remove alot of of the divs and combine many of the css classes, and then you have made a custom-made html/css solution that suits your meny... and menues very similiar to yours.
There are two main elements on the page: 'header image' and 'navbar'. The image overlaps the navbar partially using margin.
By default it works fine because of some trick which I don't know.
Image ovelaps the navbar but links in navbar are still working in the area where image is transparent
However once navbar is made fixed (position:fixed after scrolling, by affix plugin) this trick doesn't work anymore - navbar overlaps the image.
My html is the following:
<div class="container brand-img-container">
<img class="brand-img" alt="" src="IMAGEWHICH OVERLAPS PARTIALLY" />
</div>
<div id="nav-wrapper" class="container">
<div class="row">
<div id="nav" class="navbar navbar-static span4">
<div class="navbar-inner">
<ul class="nav pull-left">
<li>Button</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<h2> R <h2>
</div>
CSS is the following
#nav.affix {
position: fixed;
top: 0;
}
.brand-img-container {
position: relative;
margin-bottom: -80px;
}
You can find it here with the picture (base64)
http://jsfiddle.net/5qYK8/9/
When I try to play with z-index, the image fully overlaps the navbar even in default case and links are not working at all.
You can find it here
http://jsfiddle.net/5qYK8/8/
Is it possible to make image (part of red cross) to overlap the navbar in fixed and not fixed cases with working Button?
Can someone at least explain why Button is working in first case when image does overlap it?
Because you have 1 image rolling over the link in the navigation at at one point, its going to cover the link, so you are going to have to create another link in a fixed <div> using your same jquery script. The link will be transparent, but the spot will be clickable with whatever link you place in it
You will need to create another <div> container, then place <a> link around a <div>, like this:
<div id="toplayer">
<a id="nav1" class="link" href="#"><div class="inner"></div></a>
</div>
You will also have to duplicate the selector ID below and rename it to something like this example.
#nav1.affix {
position: fixed;
top: 0;
z-index: 0;
}
Your CSS will need to have a z-index higher than the div containing the image. In my example, I have made the background blue so you can see it move while testing it.
#toplayer{position:relative;width:85px;height:40px;}
.inner{width:85px;height:40px;background:blue;}
.link {width:85px;height:40px;}
Here is a fiddle with a blue background so you can see it working. Here is a fiddle without the blue so you can see what it should look like.