Here is my tumblr blog:
thestorywithnoending.tumblr.com
I want a frame around the image header, so that the content disapears when I scroll down,
but the header stays in place...
just like this blog:
tiredskin.tumblr.com
but I cant figure out how to do this,
please help,
thanks.
Here's what you need to do.. Replace this in your current code
</style>
<body>
<p><center><img src="http://michaeljamess.webs.com/blogheader.png" border="0"/></center>
</p>
with this
<style type="text/css">
#left {
float: left;
margin-left:338px;
width: 500px;
height: 100px;
font-size: 11px;
text-align:left;
position:fixed;
background-color:none;
padding:0px;
z-index:999;
top:0px;
}
#content{
margin-top:300px!important;
}
</style>
<div id="left">
<center>
<a href="http://thestorywithnoending.tumblr.com">
<img src="http://michaeljamess.webs.com/blogheader.png" border="0"/>
</a>
</center>
</div>
p.s if it solved your problem, mark it as the best answer :)
Related
I have a bit problem to link vue.js and scss.
I have this AppHeader.vue archive:
<template>
<header id="header" class="header">
<div class="header-container container">
<nav>
<a class="btn-icon logo-btn" href="/">
<img
class="logo logo-normal"
src="../assets/logo.svg"
alt="Logo petinder"
/>
<img
class="logo logo-white"
src="../assets/logo_white.svg"
alt="Logo petinder"
/>
</a>
<ul class="menu-links">
<li>Servicios</li>
</ul>
</nav>
</div>
</header>
</template>
<script>
export default {
name: "Header",
};
</script>
<style lang="scss">
.header {
background: $accent;
text-align: center;
padding: 10px;
}
.aright {
text-align: right;
}
I have another folder where I have four scss archives. One of them, _base.scss, has the css body like this:
body {
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: $text-color;
font-family: $font-family-sans-serif;
font-size: 16px;
max-width:100%;
overflow-x: hidden;
}
ul, li{
list-style: none;
padding:0;
margin: 0;
}
.app-container{
min-height: calc(100vh - 61px);
display: flex;
flex-direction: column;
//padding-top: 70px;
}
main{
height: 100%;
flex:1;
}
The problem is that css body is not working on the AppHeader.vue. When I see it on the webrowser, the body has no width.
How can I link them?
Thanks.
Another way to do this is by using this inside the style,
result: <style src='../style.css' scoped>
It's more useful because you can use scoped with this method.
best way for the link your css file to the vue component is the import your css to the App Header.vue component, like this
<style lang="scss">
#import "./path/_base.scss"; // please enter your current path
</style>
course sure that used of webpack in your project that help you for modular
I tried to place an h1 element above a div element using the css property z-index, but it's not working!
Here's my html:
<div id="header">
<div id="headerblock">
</div>
<h1>This is my header text</h1>
</div>
The #headerblock has a black surface including some transparency.
I want the h1 to be appearing above the #headerblock. As I mentioned the z-index property isn't working. Does someone have a solution for this? Or at least a reason why it's not working?
Thanks.
Gotta have a position on the h1.
h1 {
position:relative;
z-index: 500;
}
#header{
background-image: url(img/head.jpg);
background-size: 100%;
height: 520px;
width: 100%;
top:49px;
position: absolute;
margin:0 auto;
text-align:center;
}
#headerblock{
background-color:#444444;
opacity:0.7;
filter:alpha(opacity=70);
width:100%;
position:absolute;
height:200px;
}
<div id="header">
<div id="headerblock"></div>
<h1 style="color:white">This is my header text</h1>
</div>
I've searched and tried several of the solutions to no avail. I'm currently using jQuery 1.7.1 and Nivo Slider 3.0.1 .
You can see the website at http://www.wheelerbikeclub.net (this is a website I created last year and I'm just coming back to now).
None of the effects on my nivo slider in my home page are working. I know there was a point last year where they were, but then I changed something and now they don't and I cannot recollect what it is that happened.
I've made sure the number of columns/boxs/slices evenly divide my images. Does anyone have any idea what the issue is? Is it somehow related to the fact that I'm forcing my slider to cover the entire screen?
Thanks for any feedback, I greatly appreciate it!
I make calls for the jQuery followed by NivoSlider script in the head section
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.3.0.1.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Then in my body in a wrapper I put
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="img/new_slides/slide_1-3.png" alt="" title="#slide_1-caption"/>
<img src="img/new_slides/slide_2-4.png" alt="" />
<img src="img/new_slides/slide_4.png" alt="" />
<img src="img/new_slides/slide_3-1.png" alt="" />
</div>
<div id="slide_1-caption" class="nivo-html-caption">
<strong>Find Out More</strong>.
</div>
</div>
There are four images and I'm just testing the caption with image one.
In my nivo-slider css I have (not the entirety, just where I think the problem might lay)
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
z-index:2;
}
.nivo-slice {
display:block;
position:absolute;
z-index:100;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
And in my main styles.css I have
.slider-wrapper { position:relative;
top: 0px;
left: 0px;
width: 100%;
position:fixed;
z-index:0; }
#slider-div { min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; }
Hope that makes sense.
I'm looking for CSS code on creating a solid colored table with an image and text wrap. This is to be used in Squarespace. Anyone know how I can get that?
<html>
<head>
<style type="text/css">
.mycss {
background-color: #997E6E;
border: 21px solid #997E6E;
color: #FFFFFF;
font-family: arial, helvetica, sans-serif;
font-size: 15px;
font-weight:normal;
letter-spacing: 1pt;
line-height:1;
word-spacing: 2pt;
text-align: left;
}
</style>
</head>
<body>
<p class="mycss">
As my teacher says, our bodies are the best technology we have! Through it, we can transform ourselves from being blocked and out of balance into being energetic, clear-minded and open-hearted.
</p>
</body>
</html>
If you're doing this outside of the developer platform...
I would put the class inside a div instead of p
<div class="mycss">
<p> As my teacher says, our bodies are the best technology we have! Through it, we can transform ourselves from being blocked and out of balance into being energetic, clear-minded and open-hearted.</p>
</div>
Your css looks fine for the border. If you want to float the image to the right inside this div, add
.mycss img {
float:right;
}
Hey guys, my first question here on stack overflow. Trying to get something pretty simple to work, I'm sure I'm missing something quite obvious. Still getting used to the "standard" css, too many years working with non-functional ones! Heh.
So, sample of what I'm doing:
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: relative; z-index: 99999; top: 0px; left: 0px;">
<div style="z-index: 99999; overflow-y: hidden; position: absolute; overflow: hidden; height: 200px; left: 0; auto: 0">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
In essence: The first div is a container, that I would like to automatically overflow as content is added. Inside of that container, I have a popup menu, which I have simplified here. The popup menu appears (as it should) directly under "hello".
My problem, however, is that instead of the popup menu "coming out" of the parent, as would be expected by the absolute position, it is actually causing a scrollbar to appear on the parent.
I know that if I take otu the "position: relative" it works, but then it no longer appars where I want it (directly under the previous element).
What am I missing here?
EDIT: Sample here: http://marcos.metx.net/OverflowTest.htm
first of all - Inline styling is a big no no.
It is best to include a style sheet and apply it to individual div's via the "id" or "class" attributes.
Please read up on standards compliant css at w3schools
The problem is your overflow property.
auto - "If overflow is clipped, a scroll-bar should be added to see the rest of the content"
What you are looking for is "overflow: visible;"
Using position: absolute instead of relative on that middle div will solve your problem. This gives you (with an added border color on the inner-most div):
alt text http://img.skitch.com/20100211-x8mnu5ds4exphbdbg956cuj6ea.png
And here is the updated source code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div style="overflow: auto; border: 1px solid">
hello
<div style="position: absolute; z-index: 99999">
<div style="z-index: 99999; overflow-y: hidden; position: absolute;
overflow: hidden; height: 200px; left: 0; auto: 0;
border: 1px solid red">
<ul>
<li >New</li>
<li >Old</li>
</ul>
</div>
</div>
</div>
</body>
</html>
For more on this, see Absolutely positioned box inside a box with overflow: auto or hidden.