Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I would like to move the logo to the left of site title and description. I have Googled CSS tweaks to reposition the logo but it didn't work. I have little to no knowledge about CSS.
Is there anyone who can help me please? The site is www.cebubibleseminary.com
Hello and welcome to stack overflow.
I hope this helps
CSS fix
.site-intro .avatar {
width: 104px;
float: inherit;
}
this is how it will look after
you have the tags wrong. This should be a CSS question.
To solve your problem just put the content in 2 divs. Apply the style property float left and float right for example. If you want them aligned use the attribute width. An example:
<div style="float:left; width:300px;">
<img alt="Cebu Bible Seminary Inc." src="http://0.gravatar.com/avatar/cc3b29587548d89dfb16b15223a18995?s=256&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D256&r=G" class="avatar avatar-256 photo" height="256" width="256">
</div>
<div style="float:right"; width:800px;>
<h1 class="site-title">Cebu Bible Seminary Inc.</h1>
<h2 class="site-description"></h2>
</div>
The reason it doesn't work is that headers automatically create new lines. This website did something similar:
palyrobotics.com
Make the header with the style "display:inline;". See below for an example:
<img src="/assets/img/logos/main_logo.png" width="100" height="50">
<div class="show-for-small-only">
<h2 style="display:inline; margin-left:-10px;">Paly Robotics</h2>
</div>
You would do:
<a href="http://www.cebubibleseminary.com/" title="Cebu Bible Seminary Inc." rel="home" class="site-intro">
<img alt="Cebu Bible Seminary Inc." src="http://0.gravatar.com/avatar/cc3b29587548d89dfb16b15223a18995?s=256&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D256&r=G" class="avatar avatar-256 photo" height="256" width="256">
<h1 class="site-title" style="display:inline;">Cebu Bible Seminary Inc.</h1>
<h2 class="site-description"></h2>
</a>
This should work. LMK if it doesn't.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I would like to know the best way of using HTML5 and div tags together. I have posted my html below.
I am using the article tag then I have sections which I am sure are correct, but I am using grids as well, so where should I put the grid div?
Is my method the best way of doing it?
<article>
<div class="grid-wrapper">
<section>
<div class="grid-4-col">
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
</div>
</section>
<section>
<div class="grid-4-col">
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
</div>
</section>
<section>
<div class="grid-4-col">
<h1>Welcome Back</h1>
<p>It has been a while. What have you been up to lately?</p>
</div>
</section>
<section>
<div class="grid-4-col grid-last">
<h3>Chicago</h3>
<h5 hidden>City in Illinois</h5>
<img src="chicago.jpg" alt="Chicago, the third most populous city in the United States">
<ul>
<li>234 square miles</li>
<li>2.715 million residents</li>
</ul>
</div>
</section>
</div>
</article>
According to HTML5Doctor, the way you've gone about it is fine. You're effectively using the divs as wrappers and that's permitted.
Source: http://html5doctor.com/you-can-still-use-div/
Since you are using a grid system, and a section element sections off content, you want the section to be inside the grid, which is defined by the div. So put the section element inside the div. Otherwise, your grid is relative to the section and not the whole page and grid system.
Hoping someone here can help me, I installed a wordpress theme on a site ( http://nationalaviationinstitute.ie/ ) and I have an issue I can't resolve and the developer of the theme is refusing to acknowlege the issue!
If you visit the above site in Chrome, the bottom section of the site jumps up and covers the four service areas underneath the image slider. This only happens in Chrome, it's ok in all other browsers, it's obviously something to with the responsiveness of the site as if you resize the bottom section moves back to the correct position.
I'm fairly familiar with CSS and HTML so if anyone could give me a hand figuring out the cause of this and a possible solution I'd greatly appreciate it.
Thanks,
Anthony
There is a javascript bug which is giving the divs inside each <li> tag style="height: 0px;" on resize event like the example below:
<li class="span3 thumbnail">
<div class="block-thumbnail maxheight col" style="height: 0px;">
<i class="icon-3x icon-cogs"><i class="circle-border"></i></i>
<h3>Our Courses</h3>
<p>At NAI we have a number of different courses to suit everybody’s needs, academic to professional. <a class="link" href="http://nationalaviationinstitute.ie/courses/">read more →</a></p>
</div>
</li>
if you find and fix the js that is causing this problem than the problem will be fixed.
But incase you need a faster fix you can add the following css:
.block-thumbnail{
display: inline-block;
}
It will override the style="height: 0px;" added by the js and the bottom section will be pushed down
I want to edit this picture.
http://2.bp.blogspot.com/-42H3onuga5o/UYs7FXqbSlI/AAAAAAAABHU/Pv2iKLwVl4s/s1600/aboutus.png
I see in the edit blogtemplate html editor:
<li>
<div class='menu-abs-bg background-color'/>
<div class='menu-specs'>
<div class='home-icon'/>
<a href='http://rivadotaku.blogspot.com/' title='Home'>Home</a>
<span>Rivadotaku's Blog</span>
</div><ul/></li>
<li>
How to change the picture? You can see in the www.rivadotaku.blogspot.com, in the right bar.
I just a newbie, i only can edit a picture in this html
<img alt='' src='http://2.bp.blogspot.com/-S0aK8YBRU20/UYzIzLBILSI/AAAAAAAABIY/np2T4NYR9ng/s320/article1.png'/>
<a href='http://www.templateism.com' style='background-color: rgba(108,203,103,.9);'>templateism.com
Please help me, sorry for bad English.
Thank you
I'm not sure about what you are tryng to do. If you just want to show another picture instead of the picture you are showing right now, you have to change the src attribute.
<img alt='' src='http://newlink.com/newimg.png' />
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
Am trying to decide the best way to markup this design I'm working on. The quick outline of it is here:
It's a news article.. so I'd like to use the article tag and then some aside information. My issue is the design layout of it.. the h1 of the article spans over the 2 columns.. I want to use article tag for the h1, publish information and main body.. but in order to do that and fit the design I'd have to include the rightcolumn inside the article which is not great semantically. The information in the right column is common to lots of pages so shouldn't be part of an aside.
So at the moment I'm thinking along the lines of
<h1>News article title</h1>
<div class="leftcol">
<article>
<p>publish information</p>
<p>Main body in general markup</p>
</article>
<aside>
Related content here
</aside>
</div> <!-- end left col -->
<div class="rightcolumn">
Contact form code, followed by customer quote stuff
</div> <!-- end right column -->
I'm concerned about leaving the H1 outside the article tag - Seems like it kind of defeats the purpose, but I'm not sure what other way would work. Possible repeat of the h1 tag inside the article as well but that's definitely not ideal..
What is the most semantically correct way of marking this design up?
*ED
Can't do opinion based questions.. but in case anyone else is considering the same thing (and not allowed to ask it) I went with the following:
<div class="page-heading">News article title</div>
<div class="leftcol">
<article>
<h1>News article title</h1>
<p>publish information</p>
<p>Main body in general markup</p>
</article>
<aside>
Related content here
</aside>
</div> <!-- end left col -->
<div class="rightcolumn">
Contact form code, followed by customer quote stuff
</div> <!-- end right column -->
Decided to keep the h1 within the article (and hide it with css) and then just use a div outside the columns with the same content to hold true to the design.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
How to override cloudmade maps css with your own css. I emmbeded code of a map to my site, and map is displayed, but on maps are credits i bottom right corner and zoom scroller. I dont mind for credits but i want to remove that zoom scroller. I tried use css: display: none; on style of cloudemade but not helping. How to put my css over theirs?
Here's the HTML code:
<div id="yjsg6" class="yjsg_grid yjsgsitew">
<div id="user16" class="yjsgxhtml only_mod" style="width:100.00%;">
<div class="yjsquare ">
<div class="yjsquare_in">
<div class="Flexible-container">
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.cloudmade.com/iframe?&lat=45.8122871952285&lng=15.97111701965332&zoom=14&styleId=102945"></iframe>
</div>
</div>
</div>
</div>
</div>
And all CSS code is in this link
Thanks!
This hack works:
#yjsg6 {
margin-left: -50px;
}
You can't affect the content of the iframe, because it's from a different origin. It should be possible to affect iframe styles with but this doesn't seem to be implemented yet.