The best way I can describe it is by showing.
<div style="position: absolute; z-index:100">This is in background</div>
<div style="position: absolute; z-index:5000">This is in foreground</div>
I thought maybe it could be used in a similar way, but i think im too stupid.
I think I got the rotation part, I have seen a lot of css codes on the internet for that. So if i can just get some help and find a way to just place the banner on top of my container, that would be a huge help!
I want it to be ontop of this:
What I want: http://i.imgur.com/E5DuDSw.jpg
Banner: http://i.imgur.com/LTUZE58.jpg
I tried this:
<div id=container>
<div style="clear:both; height: 40px"></div>
<div class=box_highlight>
<h2 style="text-align: center; color: #000000;">Bestellen Sie jetzt!</h2>
<center>
<h3>
<ul style="padding-top:30px">
<li>- Blick ins Olympiastadion München</li>
<li>- Hochwertiges, doppellagiges Polyester-Pongée-Material</li>
<li>- Durchmesser ca. 140 cm</li>
<li>- Stabiles Metallgestänge</li>
</ul>
</h3>
<h2 class="priceSize" style="text-align: center; color: #000000" ><br>
Preis: 24,90 €
</h2>
<h3>
<ul style="padding-top:30px">
<li>zzgl. Versandkosten: Deutschland: 4,95 € / EU: 14,95 € / Schweiz: 22,70 € </li>
</ul>
</h3>
</center>
<br>
</div>
Thanks!
Try this:
<div id=container style="position:relative;">
<div style="position:absolute; top: 0; left:-50px; transform:rotate(-45deg)"><img src="http://i.imgur.com/LTUZE58.jpg" alt="" width="300"></div>
<div style="clear:both; height: 40px"></div>
<div class=box_highlight>
<h2 style="text-align: center; color: #000000;">Bestellen Sie jetzt!</h2>
<center>
<h3>
<ul style="padding-top:30px">
<li>- Blick ins Olympiastadion München</li>
<li>- Hochwertiges, doppellagiges Polyester-Pongée-Material</li>
<li>- Durchmesser ca. 140 cm</li>
<li>- Stabiles Metallgestänge</li>
</ul>
</h3>
<h2 class="priceSize" style="text-align: center; color: #000000" ><br>
Preis: 24,90 €
</h2>
<h3>
<ul style="padding-top:30px">
<li>zzgl. Versandkosten: Deutschland: 4,95 € / EU: 14,95 € / Schweiz: 22,70 € </li>
</ul>
</h3>
</center>
<br>
</div>
Here's the fiddle
I don't know if you are embedding all the CSS in the html for asking your question, but you should really put all of it in a separate stylesheet.
The simplest solution:
<div id="container">
<div id="main_content"></div>
<div id="banner"></div>
</div>
And a CSS here:
http://jsfiddle.net/uf67L7tp/
Related
HI. What i Want to do is i want to color up my homepage with 2 colors, where the centre of the page is different color with the whole's background color. So, the blue gridlines is the part where i want it in white color.
below is the code:
<body>
<style>
body {
background-color: #A2D8EB;
}
#wrapper
{
background-color:#F4F4F4;
}
</style>
<center>
<br>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'>Utama</a></li>
<li><a href='login design.php'>Log Masuk</a></li>
<li><a href='contact.php'>Hubungi Kami</a></li>
</ul>
</div>
</center>
<center>
<br><br>
<img src="bilik/a.gif">
</center>
<center>
<div id="wrapper">
<p font face="Verdana,Arial,Helvetica size="6" color="black">Sistem ini dibangunkan oleh Cawangan Teknologi Maklumat </p>
<p font face="Verdana,Arial,Helvetica size="6" color="black"> Jabatan Kastam Diraja Malaysia Wilayah Persekutuan Kuala Lumpur </p>
<p font face="Verdana,Arial,Helvetica size="6" color="black">bagi memudahkan semua staf untuk membuat tempahan bilik di JKDM WPKL </p>
</div>
</center>
</body>
so i really hope you guys can help me out. thank you :
Hi I have understood your problem and here is the solution of it. Try it may be this is what you wanted.
<body>
<style>
body {
background-color: #A2D8EB;
}
#wrapper
{
background-color:#F4F4F4;
width: 60%;
text-align: -webkit-center;
}
</style>
<div style="text-align: -webkit-center;">
<br>
<div id="cssmenu">
<ul >
<li class='active'><a href='index.html'>Utama</a></li>
<li><a href='login design.php'>Log Masuk</a></li>
<li><a href='contact.php'>Hubungi Kami</a></li>
</ul>
</div>
</div>
<div style="text-align: -webkit-center;">
<div id="wrapper" >
<div style="text-align: -webkit-center;">
<br><br>
<img src="bilik/a.gif">
</div>
<div style="text-align: -webkit-center;">
<div >
<p font face="Verdana,Arial,Helvetica" size="6" color="black">Sistem ini dibangunkan oleh Cawangan Teknologi Maklumat
</p>
<p font face="Verdana,Arial,Helvetica" size="6" color="black"> Jabatan Kastam Diraja Malaysia Wilayah Persekutuan Kuala Lumpur </p>
<p font face="Verdana,Arial,Helvetica" size="6" color="black">bagi memudahkan semua staf untuk membuat tempahan bilik di JKDM WPKL </p>
</div>
</div></div></div>
</body>
Hope this may help you.
html css background
Here is my messageboard project, I don't know why the different will influence my css layout...
I just test english,chinese,thai they both work great, but only japanese will destroy my css style..
I use en_US,ja_JP,zh_TW,th_TH php file to change language
When use English
When use japanese
<li class="board_list">
<div class="board_img">
<img class="board_icon" src="./static/icon/board_icon.svg" alt="board icon">
</div>
<div class="board_text">
<div class="board_title">
<span>
<a href="./board.php?board_id=1">
<span>This was just test the title length of board name</span>
</a>
</span>
</div>
<div class="board_info">
<p class="p1">投稿:26</p>
</div>
</div>
<div class="board_latest">
<div class="board_latest_title">
<span>最新の投稿 :</span>
This was just test the title length of board name
</div>
<div class="board_latest_info">
<a href="./member.php?user=1" title="carry0987">
<span>carry0987,</span>
</a>
<span>2018-04-28</span>
</div>
</div>
</li>
<li class="board_list">
<div class="board_img">
<img class="board_icon" src="./static/icon/board_icon.svg" alt="board icon">
</div>
<div class="board_text">
<div class="board_title">
<span>
<a href="./board.php?board_id=2">
<span>Default</span>
</a>
</span>
</div>
<div class="board_info">
<p class="p1">投稿:6</p>
</div>
</div>
<div class="board_latest">
<div class="board_latest_title">
<span>最新の投稿 :</span>
This was just test the title length of board name
</div>
<div class="board_latest_info">
<a href="./member.php?user=2" title="carry0987y">
<span>carry0987y,</span>
</a>
<span>2018-04-28</span>
</div>
</div>
</li>
And this is my css code
.board_list {
border-width: 1px;
border-style: solid;
border-color: #E9E9E9;
}
You should add new div inside .board_list this class and add css property clear:both;
Something like this :
Also read this article : https://www.w3schools.com/cssref/pr_class_clear.asp
I've recently designed a website and have realised that some of the background of the content, when you scroll down is transparent and so the fixed div that is beneath the content displays on IE and Firefox. Please see my website for a live view of the problem. The HTML is below. Please see below an image of my problem as you can see the text "Get In Touch" is being displayed. I want the background of the content to be above this. Please find attached the fiddle.
<body>
<div class="overlay overlay-hugeinc">
<button type=button class=overlay-close></button>
<img src=http://kadeem.london/Image/Transparent-Kadeem-min.png class="fixed-Me scaling">
<nav>
<ul>
<li><a href=http://kadeem.london>Home</a></li>
<li><a href=papers.html>Papers</a></li>
<li><a href=events.html>Events</a></li>
<li><a href=designs.html>Designs</a></li>
</ul>
</nav>
</div>
<div id=trigger-overlay>
<div class=menubutton>
<h3 class=menubuttontext>MENU</h3></div></div>
<div class=high-container>
<div class=global-container>
<div class=Intro-Video>
<div class=video-box>
<div id=video-container>
<video autoplay class=fillWidth>
<source src=Video/Trailer.mp4 type="video/mp4"/>
</video>
<div class=Kadeem-Logo>
<img src=http://kadeem.london/Image/KL-LOGO.png>
</div>
</div>
</div>
</div>
<div class=content-container>
<div class=row>
<div class="border red"></div>
<h1 class=title-role>
I'm Kadeem
</h1>
</div>
<div class=post-container>
<div class=Biographical-Content>
<div class="step out-view"></div>
<br>
<p>I go by the name of <a href=https://www.linkedin.com/pub/kadeem-laurie/57/277/9b5>Kadeem Laurie</a>. I am an events graduate currently developing an events marketing start-up. This website was created from scratch using HTML5, CSS3,jQuery & responsive design. I specialise in event management, digital content, SEO, marketing strategy, branding and front-end web design. <p> Freedom of thought inspires me. I love conceptualising and seeing ideas evolve. I see myself as a marketeer who simply likes to make things look good, branding has thus always been my most favourable aspect of marketing. I studied event management in university and have organised a <a href=events.html> few events</a> of my own. I am currently working as an event organiser at <a href=https://en.wikipedia.org/wiki/Spire_Healthcare>Spire Healthcare</a>. I hope to integrate events within marketing strategy more. I like to ask the <a href=http://stackoverflow.com/users/1923610/kadeem-laurie target=_blank>right questions</a> and find solutions from different perspectives. My academic interests lie in the regions of city branding and <a href=https://www.academia.edu/14690454/The_Commercial_and_Political_Implications_of_Events>events management.</a> <p>My favourite book is <a href=https://en.wikipedia.org/wiki/The_Prince>The Prince</a> by Nicolo Machievelli. My favourite dish is <a href=http://lifestyle.sapo.pt/sabores/receitas/arroz-de-marisco>Arroz De Marisco.</a> This website has been recently created so content is being added concurrently.
<p>
</p>
</div>
</div>
</div>
<div class=other-contain>
<div class=My-Gems>
<div id=effect-6 class="effects clearfix">
<div class=img>
<img src=https://alchetron.com/cdn/zeebra-5e766eb1-964a-49c5-b888-c05effa9354-resize-750.jpeg style=height:100% alt>
<div class=overlay5>
<a class=expand>Bone & Joint Launch</a>
</div>
</div>
<div class=img>
<img src=http://kadeem.london/Image/Money-Matters-Logo.png alt>
<div class=overlay5>
<a href=designs.html class=expand>Money Matters</a>
</div>
</div></div>
</div>
</div>
<div class=eee>
<div class=row>
<section id=activities class=pane>
<div class=pane-content>
<div class=pane-row>
<div class=summary>
<p>POSTS</p>
</div>
</div>
<div class="pane-row d">
<div class=activity-col>
<h4>city branding</h4>
<ul>
<li><a>The Impact of City Branding in The Perceived Image of Cities: The Case of New York City</a></li>
</ul>
<h4>Urban Regeneration</h4>
<ul>
<li>The Role of Events in Urban Regeneration</li>
<li>Hacknified</li>
</ul>
</div>
<div class=activity-col>
<h4>Marketing Strategy</h4>
<ul>
<li>Marketing Strategy: British Airways vs. Air France</li>
<li>The Marketing Strategies of Startup Brands</li>
</ul>
<h4>Events Management</h4>
<ul>
<li>The Political & Commerical Implications of Events</li>
</ul>
</div>
<div class=activity-col>
<h4>Events Marketing</h4>
<ul>
<li>Marketing Events Online</li>
<li>The Role of City Branding in Urban Tourism</li>
</ul>
<h4>Digital Marketing</h4>
<ul>
<li>Digital Content</li>
<li>Post Purchase Behaviour of Hotel Guests</li>
</ul>
</div>
</div>
</div>
</section>
<footer class=goodbye>
<div class="border red4"></div>
<div class=block>
<div class=centered>
<h2 class=text-go>GET IN TOUCH</h2>
</div>
</div>
</footer>
<footer class=goodbye4>
<div class=block6>
<div class=centered6>
If you would like to find out more about me you can <a href=mailto:kadeemlaurie#gmail.com>message me</a>.
</div>
</div>
</footer>
<footer class=goodbye5>
<div class=container1>
<footer class=footer>
<div class=container1>
<div class=flex-item>© 2015 KADEEM</div>
</div>
</footer>
</div>
</div>
You have an empty P tag inside your post-container that is causing this gap. Remove it and it will fix everything accross all browsers. Also, once the empty tag is removed, you could give the last P element (with the "My favourite book" text) a padding-bottom of 45px to push the container down correctly.
<div class="post-container">
<div class="Biographical-Content hidden visible animated fadeInUpBig">
<div style="height: 407px;" class="step out-view active"></div>
<br>
<p>I go by the name of [...]</p>
<p> Freedom of thought [...]</p>
<p>My favourite book [...]</p>
<p></p> --> Empty P tag
</div>
</div>
If for any reason you can't avoid having that "extra" <p> in your html; add this to your css
p:last-child {
display: none;
}
Here is my code:
<div class="wrap">
<div id ="header">
<a href="index" class = "logo">
<img src = "logo.png" alt = "" />
</a>
<nav class="navigation">
<ul>
<li>Share</li> |
<li>Join</li> |
<li>See Safty Tips</li> |
<li>Settings</li>
</ul>
</nav>
</div>
<div class="wrapper">
<img src="accident.png" alt="">
<div id="right-content">
<h2>Hit and Run No Injuries</h2>
<p>2.610 miles from your new neighbor<br />
May 20, 2015 at 12.34 PM </p>
<h4>California HWP 2 - High Level</h4>
</div>
</div>
<div class="wrap">
<ul class="secure_v5">
<li id="li-incident">
<a class="inviteLink dark" href="/v5/Resources.aspx?IFrameURL=Invitationv5&vn=&gORn=1">See Incident Location</a>
</li>
<li id="login-signup">
<a class="button dark" href="V4/Login.aspx?v5=1">Share Incident with Friends</a>
</li>
</ul>
</div>
<div class="thanks">
<p>Sincerely,<br />
The AlertID Team</p>
</div>
<p style="text-align:center;">This sponsor is helping to protect your neighborhood</p>
<div class="footer-links">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
and here is jsfiddle , (didn't include images)
When i run this code, some alignment is not correct,
I need something same like this
I just confused with which exact css can be used, Can anyone help me please?
Thanks,
Use HTML tables to control the design layout and some presentation. You may be used to using pure CSS layouts for your web pages, but that approach just won’t hold up in an email environment.
Use inline CSS to control other presentation elements within your email, such as background colors and fonts.
You just put div #right-content to right
try it on CSS.
#right-content {
float:right;
width:600px;
}
#right-content h2{
text-align:center;
}
I create a little attribute to h2 inside div #right-content
and define a fixed width for right-content. It's necessary because of attribute float: right.
I'm using 2 languages on my website: Arabic / English
English version: everything is OK.
I'm facing problem with Arabic version only when opening website on Chrome only, if you can check it here online (Arabic):
Here
You will see top margin above header, I'm trying to remove it but I have no idea where it's coming from but it's removed from English version successfully
It will start above .header-wrapper class.
HTML Code :
<div class="header-wrapper">
<div id="welcome">
<form action="http://staging.wain.com.kw/index.php?route=module/language" method="post" id="language_form" enctype="multipart/form-data">
<div id="language">
<a title="English" onclick="$('input[name=\'language_code\']').attr('value', 'en'); $('#language_form').submit();">
English
</a>
<input type="hidden" name="language_code" value="">
<input type="hidden" name="redirect" value="http://staging.wain.com.kw/index.php?route=common/home">
</div>
</form>
<span>مرحبا بالزائر يمكنك</span>تسجيل الدخول<b>أو</b>تسجيل جديد
<div class="links">
حسابي <ul>
<li>حسابي</li>
<li>سلة الشراء</li>
<li>إكمال الطلب</li>
</ul>
</div>
قائمة المقارنة
قائمة رغباتي (0)
</div>
<div id="header" class="sunset">
<div id="menu">
<span>Menu</span>
<ul>
<li class="home"><a title="الرئيسية" href="http://staging.wain.com.kw/index.php?route=common/home"><span><i class="icon-home"></i></span></a></li>
<li>أكواب
</li>
<li>الإكسسوارات
</li>
<li>بوستر
</li>
<li>سماعات
</li>
<li>ملابس
<div>
<ul>
<li>تي شيرت (19)</li>
<li>طويلة الأكمام (2)</li>
<li>قبعات (2)</li>
<li>هودي (3)</li>
</ul>
</div>
</li>
<li>ملصقات
</li>
</ul>
</div>
<div id="logo"><img src="http://staging.wain.com.kw/image/data/logo2.png" title="WAIN" alt="WAIN"></div>
<div id="cart">
<div class="heading">
<h4><i class="icon-shopping-cart"></i><!--سلة الشراء--></h4>
<a><span id="cart-total">سلة الشراء فارغة!</span></a></div>
<div class="content">
<div class="empty">سلة الشراء فارغة!</div>
</div>
</div> </div>
</div>
CSS Code:
.header-wrapper {
max-width: 1200px;
margin: 0px auto 0px;
}
Thank you.
Right after you <body> tag there is a lot of white-space. remove it and the space is gone.
It's generally recommended to keep the markup as clean as possible to avoid porblems like this in the future.
<body>
<meta charset="UTF-8">
After the body tag, there is a whitespace. You need to remove that white space to avoid the margin top.